vue.js路由配置vue-router的基础学习 - 概念篇

引言 · 相关问题小结：

• RESTful模式？
• vue-router的安装和使用？
• 如何设计路由，才能完成View端的项目开发？
• vue.js项目的完整建立？

---

---

---

---

首先，在src/components/下建立相关的页面.vue文件，在全局路由配置文件src/router/index.js中引入或注册相关文件或组件；

看下文之前，我们先看一段代码：

// index.js 配置
...省略...
import MovieList from '@/components/movieList'
...省略...
export default new Router({
 routes: [
       {
	      path: '/movieList',
	      component: MovieList
	    }
 ]
})

// src/components/ 相关文件配置
<template>
   <div>
     <p>movieList.vue</p>
     <p>电影列表页面</p>
   </div>
</template>

浏览器效果图 · 查看地址： localhost:8080/#/movieList

一、动态路由匹配 （两种情况）

即：一个路由中设置一个（或多个）路径参数

• 对应的值都会设置到$route.params中；
• 当用户访问时，也会自动匹配相关的路径。
• 除了$route.params之外，$route对象还提供了其他有用的信息。例如：$route.query(如果URL中有查询参数)、$route.hash等。

A. 两种情况，代码对比：

1. 一个路由中设置一个路径参数

   // index.js 配置
   export default new Router({
     routes: [
       {
         path: '/user/:username',     // type1:动态路由（一个参数）
         component: User
       },
     ]
   })
   

   // src/components/ 相关文件配置
   <template>
       <div>
         <p>User.vue</p>
         <p>用户页面，Hello {{ $route.params.username }}</p>
       </div>
   </template>
   

2. 一个路由中设置多个路径参数

   export default new Router({
     routes: [
       {
         path: '/user/:username/post/:post_id',     // type1:动态路由（多个参数）
         component: User
       },
     ]
   })
   

   // src/components/ 相关文件配置
   <template>
       <div>
         <p>User.vue</p>
         <p>用户页面，Hello {{ $route.params.username }} , {{ $route.params.post_id }}</p>
       </div>
   </template>
   

B. 两种情况，效果图对比：

C. 提醒 · 仔细体会：

• 当使用路由参数时，例如从/user/David导航到/user/Lucy，原来的组件实例会被复用。
  • 因为：这两个路由都渲染同一个组件，比起销毁再创建操作，复用操作则更加高效。
  • 不过，这也意味着组件的生命周期钩子不会再被调用。
    • 如果复用组件时，想对路由参数的变化做出响应的话，可以简单地使用watch(监测变化)$route对象。

D. 优先级的问题：

---

---

二、嵌套路由

代码示下：

const VIP = { template:'' }
export default new Router({
  routes: [
    {
      path: '/user/:id',  //type2:嵌套路由
      component: User,
      children: {
        path: 'vip',
        component: VIP
      }
    }
  ]
})

浏览器效果 · 查看地址： localhost:8080/#/user/2018/vip
注意： 如果把上图vip换成vip1，就看不到效果了，这也是它的实际用处之一。

---

以上就是关于“ vue.js路由配置vue-router的基础学习 - 概念篇 ” 的全部内容。