新手入门vue-router（一）

---

前言

我们的html、css、js等文件经webpack打包，存放在服务器中，当我们发起请求，每个url对应一个js文件，然后渲染出我们的页面。url与js文件的映射关系被称为路由映射表，这就是路由的基本定义。
vue-router为了单页面富应用(SPA)而生，利用vue-router，我们的页面实现了无刷新更改页面url，访问不同的内容。webpack打包时，会将每一个路由文件单独打包为一个js，在页面请求时按需加载。

---

一、vue-router的使用

上一篇博客讲了怎么使用vue-cli创建脚手架工程，这里同样使用CLI创建vue-router工程，工程会自带两个路由Home.vue、About.vue。总结vue-router使用步骤：

1、 创建将要使用的路由.vue文件；

这里about和home以及app、helloworld是脚手架工程自带的，实现两个简单的路由标签跳转。还有很多其他功能下面会一一介绍。

2、在router文件夹下的index.js中配置路由：

1. 创建路由对象
2. 配置路由routes映射关系
3. 导出路由对象
   下面给出index.js的示例代码：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// 2、配置路由映射关系
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 嵌套子路由，在父路由Home.vue文件中决定显示
    children: [
      {
        path: '/',
        // 默认路径
        redirect: 'news'
      },
      {
        path: '/news',
        name: 'News',
        component: () => import('../components/HomeNews.vue')
      },
      {
        path: '/message',
        name: 'Message',
        component: () => import('../components/HomeMessage.vue')
      }
    ]
  },
  {
    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/About.vue')
  },
  {
    // 动态路由 path: '/user/:userId'
    path: '/user/:userId',
    name: 'User',
    // 路由懒加载，打包时路由组件打包到单独的js文件中，用到时再加载，提升浏览器速度
    component: () => import('../components/User.vue')
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('../components/Profile.vue')
  }
]
// 1、创建路由对象
const router = createRouter({
  routes,
  // 配置history路由
  history: createWebHistory(process.env.BASE_URL),
  
  // linkActiveClass属性修改被点击的router-link标签类名
  // 原始类为router-link-active、router-link-exact-active，修改只改变前者
  linkActiveClass: 'active'
})
// 3、导出路由
export default router

3、使用路由，并确定其显示位置

<template>
   <div id="nav">
       <!--router的全局组件，最终渲染成<a>标签-->
       <!--tag\replace属性无效？？-->
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
       <button @click="aboutClick">About</button> |
       <router-link :to="'/user/' +  userId">User</router-link> |
       <!--如果想用button来跳转，同样使用this.$router.push({path: '/profile', query: {name: 'zkl', age: 23, height: 173.5}})-->
       <router-link :to="{path: '/profile', query: {name: 'zkl', age: 23, height: 173.5}}">Profile</router-link>
       <div id="app">
           <!--router-view决定router映射的组件显示位置，这里就是home、about下方-->
           <router-view></router-view>
       </div>
   </div>

</template>

<script>
export default {
 name: 'App',
 data() {
   return {
     userId: 'zkl',
   };
 },
 methods: {
   aboutClick() {
     // this.$router获取路由对象
     this.$router.push('/about');
   },
 },
};
</script>

<style scoped>
#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;
 text-align: center;
}

#nav a {
 font-weight: bold;
 color: #2c3e50;
}

#nav a.active {
 color: #42b983;
}
</style>

二、嵌套子路由

使用children属性，在配置路由映射关系时配置嵌套子路由。上面的index.js已经给出了配置代码，子路由要在其父路由中设置路由标签和显示位置。这里news、message都是home的嵌套路由。

代码如下（示例）：

<template>
    <div class="home">
        <router-link to="/news">News</router-link> |
        <router-link to="/message">Message</router-link>
        <router-view></router-view>
        <br>
        <img alt="Vue logo"
            src="../assets/logo.png">
        <HelloWorld :msg="msg" />
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'Home',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

三. 动态路由

动态路由的url路径不是写死的，而是动态变化的。例如user，我们访问某一用户的相关信息时，通常以这样的路径/user/userid，那么后面的userid就是动态变化的，不能写死。

配置动态路由使用 path: '/user/:userId’这种方式，使用时 User动态绑定userId。
代码如下（示例）：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// 2、配置路由映射关系
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 嵌套子路由，在父路由Home.vue文件中决定显示
    children: [
      {
        path: '/',
        // 默认路径
        redirect: 'news'
      },
      {
        path: '/news',
        name: 'News',
        component: () => import('../components/HomeNews.vue')
      },
      {
        path: '/message',
        name: 'Message',
        component: () => import('../components/HomeMessage.vue')
      }
    ]
  },
  {
    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/About.vue')
  },
  {
    // 动态路由 path: '/user/:userId'
    path: '/user/:userId',
    name: 'User',
    // 路由懒加载，打包时路由组件打包到单独的js文件中，用到时再加载，提升浏览器速度
    component: () => import('../components/User.vue')
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('../components/Profile.vue')
  }
]
// 1、创建路由对象
const router = createRouter({
  routes,
  // 配置history路由
  history: createWebHistory(process.env.BASE_URL),
  
  // linkActiveClass属性修改被点击的router-link标签类名
  // 原始类为router-link-active、router-link-exact-active，修改只改变前者
  linkActiveClass: 'active'
})
// 3、导出路由
export default router

可以通过this.$route.params.userId来访问参数。this.$route获取到当前活跃路由。this.$router获取整个路由对象。注意区分

<template>
    <div>
        <h2>我是用户组件，我是一个动态路由</h2>
        <p>我是用户的相关信息</p>
        <!--$toute获取当前活跃路由-->
        <h2>{{$route.params.userId}}</h2>
    </div>
</template>

该处使用的url网络请求的数据。

---