全面解析vue router 基本使用(动态路由，嵌套路由(4)

日期：2020-05-11 栏目：程序人生浏览：次

　　我们定义一个user组件（自己随便写一个就好了），页面中再添加两个router-link 用于导航，最后router.js中添加路由配置，来体验一下

　　app.vue 中添加两个router-link：

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <header>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <!-- 增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
  <router-link to="/user/123">User123</router-link>
  <router-link to="/user/456">User456</router-link>
 </header>
 <router-view></router-view> 
 </div>
</template>

router.js 配置user动态路由：

const routes = [
 {
  path:"/home",
  component: home
 },
 {
  path: "/about",
  component: about
 },
 /*新增user路径，配置了动态的id*/
 {
  path: "/user/:id",
  component: user
 },
 {
  path: '/', 
  redirect: '/home' 
 }
]

　　user组件

<template>
 <div>
  <h1>User</h1>
  <div>我是user组件</div>
 </div>
</template>
<script>
 export default {
 }
</script>

　　这时在页面中点击user123 和user456, 可以看到它们都导航到user组件，配置正确。　　

　　在动态路由中，怎么获取到动态部分？因为在组件中是可以显示不同部分的，就是上面提到的“你的名字”。其实，当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。它有一个params 属性，就是来获得这个动态部分的。它是一个对象，属性名，就是路径中定义的动态部分 id, 属性值就是router-link中to 属性中的动态部分，如123。使用vuex时，组件中想要获取到state 中的状态，是用computed 属性，在这里也是一样，在组件中，定义一个computed 属性dynamicSegment， user 组件修改如下：

<template>
 <div>
  <h1>User</h1>
  <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
 </div>
</template>
<script>
 export default {
  computed: {
   dynamicSegment () {
    return this.$route.params.id
   }
  }
 }
</script>

　　这里还有最后一个问题，就是动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件，就是当第一次点击（如：user123）的时候，vue 把对应的组件渲染出来，但在user123, user456点击来回切换的时候，这个组件就不会发生变化了，组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听$route 的变化。把上面的代码用监听$route 实现

转载注明出处：http://www.heiqu.com/484.html

全面解析vue router 基本使用(动态路由，嵌套路由(4)

相关推荐