vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
展開全部
直接修改地址欄中的路由地址即可：
{{msg}}
var testLogin = Vue.component("login",{
template:`
這是我的登錄頁面
`
})
var testRegister = Vue.component("register",{
template:`
這是我的注冊頁面
`
})
//配置路由詞典
//對象數(shù)組
const ?myRoutes =[
//當路由地址：地址欄中的那個路徑是myLogin訪問組件
//組件是作為標簽來用的所以不能直接在component后面使用
//要用返回值
//path:''指定地址欄為空：默認為Login頁面
{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"
}
})
一、通過router-link實現(xiàn)跳轉
注冊
{{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"
}
})
總結
以上是生活随笔為你收集整理的vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql运营_为线上运营Mysql数据
- 下一篇： vue传中文标点_vue项目引入第三方高