Vue-路由

HYjey
188 阅读3分钟

路由是一个插件，需要安装，并使用Vue.use(该插件)加入这段路由的程序，使用new方式创建路由，包括路由配置，路由信息

安装方式

  1. 使用脚手架安装，可以一开始就选好安装或后续补充安装vue add router
  2. npm安装，npm install vue-router

路由对象

路由记录：路由记录就是配置路由的一个个对象，对象包括path、comment等属性

路由元信息：路由记录中的一个字段，一般用对象的方式存储一些状态信息，为路由守卫做下一步的执行提供条件

路由对象：表示当前激活的路由状态信息，其中包含解析url所找到的路由记录，通过routes.match获得，是数组形式的

在路由守卫中，第一个参数to就代表将要前往的路由所对应的路由对象 一个路由路径可以激活一个路由对象，路由对象包含一个或多个路由记录。一个路由路径可以匹配到多个路由记录，如/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录

路由文件

路由文件.js中可以使用import，export这种关键字，当然是因为有webpack/vue-cli工具转化代码，最后会打包成标签的形式引入js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import page1 from '@/page/page1.vue'
import page2 from '@/page/page2.vue'
import page3 from '@/page/page3.vue'

Vue.use(VueRouter)

const routes = [
  //路由记录，路由记录可以嵌套，children
  {
    path: "/page1",
    name: "page1",
    component: page1
  },
  //page2,page3此处省略
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

最基础的配置包括path和component，将一个组件和路由路径相绑定，后续通过router-link标签改变路由路径，使得router-view标签被替换为该路径对应的组件

在vue文件中的使用方式

<template>
  <div id="app">
    <!-- <p1/> -->
    <!-- 注意第一个to前得有":"，因为后面是一个表达式，第二个和第三个to中本来就是字符串，因此不要":"，加上就出错了-->
    <router-link :to="{name:'page1'}">page1</router-link>
    <router-link tag="span" to="/page2">page2</router-link>
    <router-link to="/page3">page3</router-link>
    <router-view></router-view>
  </div>
</template>
  1. router-link标签，采用to的属性，将路由配置的path或{name:""}的方式赋值，可以实现导航栏的改变
  2. router-view标签，该标签本质是插槽，可以将新的内容替换到此处，配合router-link标签完成单页应用不刷新的页面切换，减少不必要的请求和提升效率
  3. tag属性可以指定router-link标签最终转换为 什么标签，由于默认是a标签，因此会有a标签的样式，可以改成span，div，li等标签

动态路由

目的：匹配一种模式下的所有路由，而全部映射到一个组件

场景：文章列表页，由于每篇的文章呈现方式是一个模式的，因此复用一个文章详情页组件即可。通过点击不同的列表项，给与一个新的路由，表现形式就是不同路由路径对应一个组件

在router-link标签中，写法是name+params的写法。匹配成功后，一般请求后端接口，来获取新的数据，按模板渲染，v-html相关组件的内容替换实现整页面的更新。该组件不会销毁，通过watch路由对象的方式去执行接口请求

命名视图

const routes = [
  {
    path: "/page1",
    name: "page1",
    component: page1//注意
  },
  {
    path: "/temp",
    name: "temp",
    components: {//注意
      view: temp
    }
  },
]

如果一个页面下需要使用多个router-view标签，默认没有设置name属性的name是default，会同时被组件替换。因此如果要使用多个router-view标签，需要给不同的name属性。而name值相对应的是routes中components里的属性名。

注意一个是component，一个是components

父子组件中都有router-view标签

  1. 注意需要让路由配置为嵌套路由的样子
  2. 父子组件中的router-view不需要通过命名区分

路由守卫

router.vuejs.org/zh/guide/ad…

路由守卫中，可通过next({ name: "p4_3" })，来指定改变到另一个路由记录

avatar
文章
阅读
粉丝