路由代码跳转
有些时候,页面的跳转可能需要执行的对应的JavaScript代码,这个时候就需要使用另外一中跳转方式了
this中有$router这个对象,就相当于app中实例的router。然后添加新的路径进去。
<template>
<div id="app">
<router-view></router-view>
<h3>我是网站的标题</h3>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<button @click="homeClick()">按钮改变路径home,改变渲染</button>
<button @click="aboutClick()">按钮改变路径about,改变渲染</button>
<!-- 相当于是占位的标签,如果放到上面,则会在上面渲染 -->
<!--<router-view></router-view>-->
</div>
</template>
<script>
export default {
name : 'App',
methods:{
homeClick(){
// 通过代码的方式修改路由vue-router
// this中有$router这个对象,就相当于app中实例的router。然后添加新的路径进去。
this.$router.push('/home');
console.log("homeClick");
},
aboutClick(){
this.$router.push('/about');
console.log("aboutClick");
}
}
}
</script>
动态路由:
1:某些情况下,一个页面的path路径可能不是确定的,是根据具体用户情况变化的:
2:比如张三点击路径显示/../zhangsan 李四点击路径显示/../lisi
这种路由我们称之为动态路由
具体配置过程:
1:创建新的组件user
2: 添加路由组件映射关系
3:利用router-link 以及 router-view显示相应组件
4:细节暂不描述,见上篇文章---vue-router详细配置
1:新建组件
2: router文件夹中的index.js绑定对应关系
3:
配置动态路由
官方配置要求:在绑定动态关系是,路径后面添加具体用户想要添加的参数
原路径/:xxxx(自定义)
app.vue中绑定具体的跳转路径即可
最终的结果:
**注意:**但是往往该路径不是固定的,想要动态的来获取,所以使用v-bind动态绑定router-link中的to属性即可,按照如下更改即可
既可以根据不同的用户动态的显示路由,但是现在添加另一个需求:就是把不同用户的路由内容直接显示到组件的内容中
小结:
下面两个是动态路由阶段非常重要的两个对象:
1:$router 这个对象可以调用一些方法来进行相关的路由跳转,就相当于实例的vue对象
2:$route 这个对象是指的是当前路由映射中的当前活跃路由,当前路由对象