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

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/85297706

文章目录

• 引言 · 相关问题小结：
• 一、动态路由匹配 （两种情况）
• A. 两种情况，代码对比：
• B. 两种情况，效果图对比：
• C. 提醒 · 仔细体会：
• D. 优先级的问题：

二、嵌套路由

引言 · 相关问题小结：

• 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的基础学习 - 概念篇 ” 的全部内容。