第4章 Vue全家桶(vue-router+vuex) - 4.4 动态路由匹配和路由组件复用

下面是项目目录：

User.vue代码：

// User.vue里面的内容
 
<template>
    <div>
        用户页面 {{$route.params.id}}
    </div>
</template>
 
<script>
    export default {
        //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
        //因为两个路由渲染了同个组件    复用高效
        created(){
            console.log(this.$route.params.id);
        },
        //响应路由参数的变化
        // watch:{
        //     $route:(to,from)=>{ //to是到哪里去，from是来自哪里
        //         console.log(to.params.id);
        //         //发起ajax 请求后端接口数据 数据驱动视图
        //     }
        // }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id);
 
            //一定要调用next，不然会阻塞整个路由  放行
            next();
        }
    }
</script>
 
<style lang="scss" scoped>
 
</style>

 index.js代码：

// index.js里面的内容
 
import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router
 
 
// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

App.vue代码：

// App.vue里面的内容
 
<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- router_link相当于a标签，to属性相当于a标签的href -->
 
      <!-- <router-link to="/">Home</router-link> | 这是静态路由
      <router-link to="/about">About</router-link> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  <!-- params是参数的意思。 -->
       
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
nav {
  padding: 30px;
}
 
nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
nav a.router-link-exact-active {
  color: #42b983;
}
</style>