命名路由：用name属性值给路由取别名
就是在路由规则数组中给路由起个别名，那么在路由链接中就可以通过name属性进行匹配路由,并且可以添加其他参数等。
<body>
<body>
<div id="app">
<!-- 路由链接 -->
<router-link to="/user/123">User1</router-link>
<!-- 与上边等价 -->
<router-link :to="{ name:'user' , params: {id:123}}">User2</router-link>
<!--占位符 -->
<router-view></router-view>
</div>
<script>
//定义组件
var User = { template:"<div>用户：{{$route.params.id}}</div>"}
//路由实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
{ path: "/user/:id", component: User, name:"user"},
]
})
var vm = new Vue({
el:'#app',
//通过router属性挂载路由对象
router:myRouter
})
</script>
</body>
</body>
注意：
运行:
这种命名路由的方式方便以后修改路由时，只需要改变name属性的值即可改变路由。
还可以编程式导航，就是不是用户被动点击，而是我们模拟函数进行主动点击。
上边的内容不变，在Vue实例中编写点击函数
var vm = new Vue({
el:'#app',
//通过router属性挂载路由对象
router:router,
mounted () {
//类似于把()中的信息入栈，与点击该信息对应的路由等效
router.push({ name:'user',params:{id:333} })
}
})
运行：
点击User2：
编程式导航(★★★)
页面导航的两种方式：
- A.声明式导航：通过点击链接的方式实现的导航
- B.编程式导航：调用js的api方法实现导航，
比如调用location.href就是push底层运用的。
Vue-Router中常见的导航方式： - this.$router.push("hash地址");
- this.$router.push("/login");
- this.$router.push({ name:'user' , params: {id:123} });
- this.$router.push({ path:"/login" });
- this.$router.push({ path:"/login",query:{username:"jack"} });
- this.
router.go(-1);(往前跳转n个页面，在栈中)
网友评论