展開(kāi)全部

直接修改地址欄中的路由地址即可：

{{msg}}

var testLogin = Vue.component("login",{

template:`

這是我的登錄頁(yè)面

`

})

var testRegister = Vue.component("register",{

template:`

這是我的注冊(cè)頁(yè)面

`

})

//配置路由詞典

//對(duì)象數(shù)組

const ?myRoutes =[

//當(dāng)路由地址：地址欄中的那個(gè)路徑是myLogin訪問(wèn)組件

//組件是作為標(biāo)簽來(lái)用的所以不能直接在component后面使用

//要用返回值

//path:''指定地址欄為空：默認(rèn)為L(zhǎng)ogin頁(yè)面

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

//myRoutes可以直接用上面的數(shù)組替換

routes:myRoutes

})

new Vue({

router:myRouter,

//或者：

/*

router:new VueRouter({

routes:[

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

})

*/

el:"#container",

data:{

msg:"Hello VueJs"

}

})

一、通過(guò)router-link實(shí)現(xiàn)跳轉(zhuǎn)

注冊(cè)

{{msg}}

var testLogin = Vue.component("login",{

template:`

這是我的登錄頁(yè)面

注冊(cè)

`

/*to后面是路由地址*/

})

var testRegister = Vue.component("register",{

template:`

這是我的注冊(cè)頁(yè)面

`

})

//配置路由詞典

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"

}

})

二、通過(guò)js的編程的方式

jumpToLogin: function () {

this.$router.push('/myLogin');

}

{{msg}}

var testLogin = Vue.component("login",{

template:`

這是我的登錄頁(yè)面

注冊(cè)

`

/*to后面是路由地址*/

})

var testRegister = Vue.component("register",{

methods:{

jumpToLogin:function(){

this.$router.push('/myLogin');

}

},

template:`

這是我的注冊(cè)頁(yè)面

注冊(cè)完成,去登錄

`

})

//配置路由詞典

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"

}

})

總結(jié)

以上是生活随笔為你收集整理的vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。