router4如何在js中控制組件跳轉(zhuǎn)
1 回答
青春有我
TA貢獻1784條經(jīng)驗 獲得超8個贊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通過router-view指定盛放組件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>這是我的登錄頁面</h1>
</div>
`
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>這是我的注冊頁面</h1>
</div>
`
})
//配置路由詞典
//對象數(shù)組
const myRoutes =[
//當(dāng)路由地址：地址欄中的那個路徑是myLogin訪問組件
//組件是作為標(biāo)簽來用的所以不能直接在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"
}
})
</script>
</body>
</html>
一、通過router-link實現(xiàn)跳轉(zhuǎn)
<router-link to="/myRegister">注冊</router-link>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通過router-view指定盛放組件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>這是我的登錄頁面</h1>
<router-link to="/myRegister">注冊</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>這是我的注冊頁面</h1>
</div>
`
})
//配置路由詞典
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"
}
})
</script>
</body>
</html>
二、通過js的編程的方式
jumpToLogin: function () {
this.$router.push('/myLogin');
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通過router-view指定盛放組件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>這是我的登錄頁面</h1>
<router-link to="/myRegister">注冊</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
methods:{
jumpToLogin:function(){
this.$router.push('/myLogin');
}
},
template:`
<div>
<h1>這是我的注冊頁面</h1>
<button @click="jumpToLogin">注冊完成,去登錄</button>
</div>
`
})
//配置路由詞典
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"
}
})
</script>
</body>
</html>
添加回答
舉報
0/150
提交
取消