路由VueRouter#

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。
什么是路由：路由是一种映射关系
Vue中的路由是什么：路径和组件的映射关系，根据路由就能知道不同路径的，应该匹配渲染哪个组件

基本使用#

vue2安装VueRouter3,Vuex3
vue3安装VueRouter4,Vuex4

VueRouter的使用(5+2)#

5个基础步骤(固定）#

① 下载:下载 VueRouter 模块到当前工程，版本3.6.5

1
yarn add vue-router@3.6.5    或    npm i vue-router@3.6.5

② 引入

1
import VueRouter from'vue-router

③安装注册

1
Vue.use(VueRouter）

④创建路由对象

1
const router =new VueRouter()

⑤注入，将路由对象注入到new Vue实例中，建立关联

1
new vue({
2

3
  render:h =>h(App),
4

5
  //router:router  =>  简写
6
    router
7

8
}).$mount('#app')

2个核心步骤#

①写组件（views文件夹中），配置路由规则（new VueRouter({配置对象中})）

views文件夹：页面组件-页面展示-配合路由使用

components文件夹：复用组件-展示数据-常用于复用

②配置导航，配置路由出口（router-view标签）

单文件路由配置#

目的：项目大了，入口文件处引入的文件过多，要修改路由规则时不方便，目的就是为了方便维护。

步骤：

1、创建src目录下创建router文件夹，router文件夹下创建index.js文件

2、引入相关文件

3、注册并配置规则

4、导出，入口文件处引入并注册

声明式导航-导航链接#

声明式导航：即router-link

需求:实现导航高亮效果 vue-router提供了一个全局组件router-link(取代 a标签)

能跳转，配置 to 属性指定路径(必须)。本质还是a标签，to 无需 #，路径to替换href

能高亮，自带激活时的类名（router-link-exact-active 和 router-link-active），可以直接设置高亮样式

声明式导航的两个高亮类名#

router-link-active ：模糊匹配（使用更多）

1
to="/find"  => 地址栏/find    /find/one    /find/two

在浏览器地址栏中，只要是在/find及其下面的路径，该标签都会有该类名

router-link-exact-active ：精确匹配

1
to="/find"  => 地址栏/find

在浏览器地址栏中，只有在/find下，该标签都会有该类名，像这样/find/one…下，该标签不会有该类名

自定义高亮类名#

在配置路由规则中配置

1
// 配置路由规则
2
const router = new VueRouter({
3
  routes: [
4
    { path: '/find', component: Find },
5
    { path: '/my', component: My },
6
    { path: '/friend', component: Friend }
7
  ],
8
  //自定义高亮类名
9
  linkActiveClass: 'active',//模糊匹配
10
  linkExactActiveClass: 'exact-active'//精确匹配
11
})

几个注意点#

路由组件通常存放在pages或views文件夹，一般组件通常存放在components文件夹。
views文件夹：页面组件（路由组件）-页面展示-配合路由使用

components文件夹：复用组件-展示数据-常用于复用
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

声明式导航-跳转传参#

理解：跳转路由时传递参数（跳转时传值）

查询参数传参-query参数(推荐传`多个参数`时用)#

在****中传

传递参数

语法：to="/path?参数名=值&参数名=值......'

1
<!-- 跳转并携带query参数，to的字符串写法 -->
2
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
3

4
<!-- 跳转并携带query参数，to的对象写法 -->
5
<router-link
6
  :to="{
7
    path:'/home/message/detail',
8
    query:{
9
       id:666,
10
            title:'你好'
11
    }
12
  }"
13
>跳转</router-link>

接收参数（对应页面组件接收传递过来的值）

语法：$route.query.参数名
```
1
$route.query.id
2
$route.query.title
```

动态路由传参-params参数（推荐传`单个参数`时用）#

①配置动态路由，声明接收params参数 path:"path/:参数名一?/:参数名二?..."

**注意：**使用动态路由传参时，跳转路由时必须要传参，不传是匹配不到对应组件的，此时需要在参数名后面加上?，这样跳转路由时就不用必须传参了

1
const router = new VueRouter({
2
  routes:[
3
    ...,
4
    {
5
      name:'xiangqing',
6
      path:'detail/:id?/:title?', //使用占位符声明接收params参数
7
      component:Detail
8
    }
9
  ]
10
}）

②配置导航链接，传递参数:to="path/参数值一/参数值二...

1
<!-- 跳转并携带params参数，to的字符串写法   666/你好  666对应:id  你好对应:titil-->
2
<router-link :to="detail/666/你好">跳转</router-link>
3

4
<!-- 跳转并携带params参数，to的对象写法 -->
5
<router-link
6
  :to="{
7
    name:'xiangqing',
8
    params:{
9
       id:666,
10
            title:'你好'
11
    }
12
  }"
13
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

③对应页面组件接收传递过来的值,接收参数：$route.params.参数名

1
$route.params.id
2
$route.params.title

路由的props传参#

作用：让路由组件更方便的收到参数，组件接收用props属性接收

1
{
2
  name:'路由名',
3
  path:'path/:id',
4
  component:引入的路由组件,
5

6
  //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
7
  // props:{a:900}
8

9
  //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数（path/:id，:id就是params参数）通过props传给Detail组件
10
  // props:true
11

12
  //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
13
  props(route){
14
    return {
15
      id:route.query.id,
16
      title:route.query.title
17
    }
18
  }
19
}

多级路由#

配置路由规则，使用children配置项：

1
routes:[
2
  {
3
    path:'/about',
4
    component:About,
5
  },
6
  {
7
    path:'/home',
8
    component:Home,
9
    children:[ //通过children配置子级路由
10
      {
11
        path:'news', //此处一定不要写：/news
12
        component:News
13
      },
14
      {
15
        path:'message',//此处一定不要写：/message
16
        component:Message
17
      }
18
    ]
19
  }
20
]

跳转（要写完整路径）：

1
<router-link to="/home/news">News</router-link>

路由重定向#

理解：网页打开时，默认的是#/,此时不会显示任何任何路由组件，为了使打开一网站默认显示一组件可以设定路由重定向。（比如说首页路径是/index,则当浏览器地址栏不管输入的是/或是/index都能显示首页）

使用：在router配置规则中使用redirect配置路径

1
const router = new VueRouter({
2
  routes: [
3
    { path: '/', redirect: '/my' },//路由重定向，当路径为/时会跳转到/my路径
4
    { path: '/my', component: My },
5
    { path: '/friend/:friend1/:friend2?', component: Friend }
6
  ],
7
})

路由提示404#

作用：当页面找不到匹配时，给页面一个提示

使用：

1、创建一个提示组件NotFound

2、引入

3、在routes数组最后一项配置

1
// 引入
2
import NotFound from '@/view/NotFound.vue'
3
const router = new VueRouter({
4
  routes: [
5
    { path: '/', redirect: '/my' },//路由重定向，当路径为/时会跳转到/my路径
6
    { path: '/my', component: My },
7
    { path: '/friend/:friend1/:friend2?', component: Friend }，
8
    // 配置
9
    { path: '*', component: NotFound } // * 任意路径，前面匹配完都没匹配到，就会匹配该组件NotFound
10
  ],
11
})

路由模式设置#

问题:路由的路径看起来不自然,有#，能否切成真正路径形式?

hash路由(默认) 例如:http://localhost:8080/#/home history路由(常用) 例如:http://localhost:8080/home(以后上线需要服务器端支持，前端只需要改mode,后端配置访问规则)

1
const router = new VueRouter({
2
  mode: 'history',
3
  routes: [....]
4
})

命名路由（简化跳转）#

作用：当路径url长度过长时，可以用 name属性简化路由的跳转。

如何使用

给路由命名：

1
{
2
  path:'/demo',
3
  component:Demo,
4
  children:[
5
    {
6
      path:'test',
7
      component:Test,
8
      children:[
9
        {
10
                      name:'hello' //给路由命名
11
          path:'welcome',
12
          component:Hello,
13
        }
14
      ]
15
    }
16
  ]
17
}

简化跳转：

1
<!--简化前，需要写完整的路径 -->
2
<router-link to="/demo/test/welcome">跳转</router-link>
3

4
<!--简化后，直接通过名字跳转 -->
5
<router-link :to="{name:'hello'}">跳转</router-link>
6

7
<!--简化写法配合传递参数 -->
8
<router-link
9
  :to="{
10
    name:'hello',
11
    query:{
12
       id:666,
13
            title:'你好'
14
    }
15
  }"
16
>跳转</router-link>

浏览器历史记录`<router-link>`的replace属性#

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航#

作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活（比如说有一个按钮，点击后跳转）

借助两个api#

$router的两个API .push()和.replace() .push()追加浏览器历史记录跳转 .replace()替换当前浏览器历史记录跳转

具体编码：#

总结：路径短的用path，长的用name，参数多的用对象写法，参数少的用字符串拼接

1
//比如说有一个按钮 点击触发函数 调用下面的api进行跳转
2
//只跳转
3
this.$router.push("路由路径")
4

5
//字符串写法-跳转传参
6
this.$router.push("路由路径？key=value&key=value")//query传参
7
this.$router.push("路由路径/params") //params传参
8

9
//跳转并传参
10
this.$router.push({
11
  path:'路径',
12
    query:{
13
      id:xxx,
14
      title:xxx
15
    }
16
})
17

18
//跳转并传参
19
this.$router.replace({
20
  name:'路由名',
21
    params:{
22
      id:xxx,
23
      title:xxx
24
    }
25
})

操控浏览器历史记录api#

1
this.$router.forward() //前进
2
this.$router.back() //后退
3
this.$router.go(n) //可前进也可后退,n是一个整数，为正(前进n步)，为负(n步)

缓存路由组件：keep-alive（优化性能）#

keep-alive是什么 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
keep-alive的优点在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提升用户体验。
keep-alive的三个属性 ① include：组件名(不是文件名，如果没有配置组件名才是文件名)数组，只有匹配的组件会被缓存组件名数组，

②exclude：任何匹配的组件都不会被缓存 ③ max：最多可以缓存多少组件实例

通常使用include,但是组件页面需缓存许多时，用exclude来排除和max来限制个数，结合使用，因为缓存过多会影响性能

具体编码：

1
<!--News不被展示时 让News组件保持挂载不被销毁 -->
2
<keep-alive include="News">
3
    <router-view></router-view>
4
</keep-alive>
5

6
<!-- 多个组件保持挂载不被销毁 -->
7
<keep-alive :include="['News', 'Message']">
8
    <router-view></router-view>
9
</keep-alive>

两个新的生命周期钩子（activated、deactivated）#

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

路由守卫#

作用#

对路由进行权限控制

分类#

全局守卫、独享守卫、组件内守卫

全局守卫#

1
//在配置路由器后，后面配置
2
//全局前置守卫：初始化时执行、每次路由切换前执行
3
router.beforeEach((to,from,next)=>{
4
  console.log('beforeEach',to,from)
5
  if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
6
    if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
7
      next() //放行
8
    }else{
9
      alert('暂无权限查看')
10
      // next({name:'guanyu'})
11
    }
12
  }else{
13
    next() //放行
14
  }
15
})
16

17
//全局后置守卫：初始化时执行、每次路由切换后执行
18
router.afterEach((to,from)=>{
19
  console.log('afterEach',to,from)
20
  if(to.meta.title){
21
    document.title = to.meta.title //修改网页的title
22
  }else{
23
    document.title = 'vue_test'
24
  }
25
})

独享守卫#

1
// 在路由器中配置
2
beforeEnter(to,from,next){
3
  console.log('beforeEnter',to,from)
4
  if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
5
    if(localStorage.getItem('school') === 'atguigu'){
6
      next()
7
    }else{
8
      alert('暂无权限查看')
9
      // next({name:'guanyu'})
10
    }
11
  }else{
12
    next()
13
  }
14
}

组件内守卫#

1
//在组件中配置
2
//进入守卫：通过路由规则，进入该组件时被调用
3
beforeRouteEnter (to, from, next) {
4
},
5
//离开守卫：通过路由规则，离开该组件时被调用
6
beforeRouteLeave (to, from, next) {
7
}

路由器的两种工作模式#

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

解决history模式刷新页面服务端404的问题的方法

使用中间件：npm官方的 connect-history-api-fallback

1
const express = require('express')
2
// 引入中间件
3
const history = require('connect-history-api-fallback')
4

5
const app = express()
6
// 使用中间件
7
app.use(history())
8
app.use(express.static(__dirname + '/static'))
9

10
app.get('/person', (req, res) => {
11
  res.send({
12
    name: 'kaka',
13
    age: 18
14
  })
15
})
16
app.listen(5000, (err) => {
17
  if (!err) { console.log('启动成功') }
18
})

发现新文章