展開全部
直接修改地址欄中的路由地址即可：
{{msg}}
var testLogin = Vue.component("login",{
template:`
這是我的登錄頁面
`
})
var testRegister = Vue.component("register",{
template:`
這是我的注冊頁面
`
})
//配置路由詞典
//對象數組
const ?myRoutes =[
//當路由地址：地址欄中的那個路徑是myLogin訪問組件
//組件是作為標簽來用的所以不能直接在component后面使用
//要用返回值
//path:''指定地址欄為空：默認為Login頁面
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
//myRoutes可以直接用上面的數組替換
routes:myRoutes
})
new Vue({
router:myRouter,
//或者：
/*
router:new VueRouter({
routes:[
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
})
*/
el:"#container",
data:{
msg:"Hello VueJs"
}
})
一、通過router-link實現跳轉
注冊
{{msg}}
var testLogin = Vue.component("login",{
template:`
這是我的登錄頁面
注冊
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
template:`
這是我的注冊頁面
`
})
//配置路由詞典
const ?myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
二、通過js的編程的方式
jumpToLogin: function () {
this.$router.push('/myLogin');
}
{{msg}}
var testLogin = Vue.component("login",{
template:`
這是我的登錄頁面
注冊
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
methods:{
jumpToLogin:function(){
this.$router.push('/myLogin');
}
},
template:`
這是我的注冊頁面
注冊完成,去登錄
`
})
//配置路由詞典
const ?myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
)
的重要性)
Maven倉庫介紹與本地倉庫配置)
