Vue-router路由代码跳转以及动态路由的详细配置介绍

路由代码跳转

有些时候，页面的跳转可能需要执行的对应的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 这个对象是指的是当前路由映射中的当前活跃路由，当前路由对象