vue-router编程式导航
2023-06-10 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/user/1">user1</router-link>
<router-view></router-view>
</div>
<script src="./vue/vue.js"></script>
<script src="./vue/vue-router.js"></script>
<script>
/**
声明式导航：通过点击链接实现的导航，叫做声明式导航
如：普通网页中的a标签，或者vue中的router-link
编程式导航：通过JavaScript形式的api实现的导航
如：普通网页中的locationhref
普通编程式导航的基本用法
常用的编程导航api如下：
this.$router.push('hash地址');
this.router.go(n)
const user = {
template:"<div><button @clik='goregister'>跳转页面</button></div>",
methods:{
goregister:function(){
this.$router.push('/register');
}
}
}
编程式导航参数规则：
router.push()方法的参数规则
//字符串：路径名称
router.push('/home')
//对象
router.push({paht:"/home"})
//命名的路由
router.push({name:"/user",params:{id:"1",uname:"lisi"}})
// 带查询参数，变成/register?uname=lisi
router.push({path:'/register',query:{uname:'lisi'}})
*/
const user = {
props:["id"],
template:"<div><button @click='goregister'>{{id}}跳转页面</button></div>",
methods:{
goregister:function(){
this.$router.push('/register');
}
}
};
const register = {
template:"<div><h1>register</h1><button @click='goback'>goback</button></div>",
methods:{
goback:function(){
this.$router.go(-1);
}
}
}
const router = new VueRouter({
routes:[
{
path:"/",
redirect:"/user/:1"
},
{
path:"/user/:id",
component:user,
props: route=>({id:route.params.id})
},
{
path:"/register",
component:register
}
]
});
const vm = new Vue({
el:"#app",
router
});
</script>
</body>
</html>
