Vue-router

路由三大组成部分

1. router-link:导航—link 标签
2. router-view:路由视图–路由页面呈现的地方
3. new VueRouter():路由配置—routes

路由配置 VueRouter

它是什么？

vue-router 是 vue 官方出的一个专门用于 vue 的路由。

使用插件安装

Vue.use(VueRouter)

组成部分

1. mode:让路由以某种形式呈现，hash 和 history 模式

2. base:设置一个根路径，用于发布的时候绑定服务端子目录的

3. routes:设置路由匹配项目的，是核心的控制器。

   • 数据类型：数组–>匹配对象
   • path:匹配的 url 地址【必须有的】
   • component：加载的页面–组件【必须有的】
   • children：子路由
   • name：路由的名称–名字
   • alias：别名
   • redirect：重定向
   • meta：路由的元信息

动态路由

• 定义
• 一个匹配规则，可以匹配 n 个导航地址，显示同一个页面
• 使用场景
• 比如从产品列表跳转到详情页，那么详情页就是一个动态路由匹配。
• 语法分析

// 匹配规则
{
   path:"/detail/:id/:n",
   component:Detail
}

 <!-- 导航 -->
<router-link to='/detail/10086/6000'>1</router-link>
<router-link to='/detail/10086/1000'>2</router-link>

// 模板页面
this.$route.params:{
   id,
   n
}

传参挂载到组件的 props

• 默认下，路由组件获取动态路由的字段，使用$route.params，可以将 params 对象数据挂载到组件的 props 上。
• 语法：

{
   path:"/detail/:id",
   props:true,//开启将params属性挂载到组件的props上
   component:Detail
}

重定向和别名

重定向：redirect

• 语法：{path:"/dir",redirect:"/otherDir"}
• 场景：当访问一个路径的时候，自动跳到指定的地址里。
• 举例：当访问/跳到/home,用*做 404 页面容错处理

别名 alias

给一个路由定义一个或多个地址，当访问其中某一个地址的时候，url 地址栏不会变，但是显示的都是同一个页面。

• 与重定向的区别：

• 和重定向不一样的是重定向地址栏会跳转到新的路由里，别名不会跳转，匹配的是同一个路由

语法：

//取一个别名
{
   path:"/home",
   alias:"/",
   component:Home
}
//取多个别名
{
   path:"/home",
   alias:["/","/me"],
   component:Home
}

嵌套路由

一级路由里包含着二级路由，依次递归嵌套。
注意事项：

• 根组件里的 router-view 显示的是一级路由
• 嵌套的路由必须要在一级的路由组件中，写 router-view
• 嵌套路由的匹配 path 不要加/，因为/表示一级路由
  语法：

{
   path:"/list",
   component:List,
   children:[
      {
         path:"hot",component:Hot
      }
   ]
}

命名路由

语法：

router.js
{
   path:"/home",
   name:"routeName",//路由的名称
   component:Home,
}

html
<!-- 跳转 -->
<router-link :to="{ name: 'routeName' }"></router-link>

js
this.$router.push({ name: "routeName" });

• 优点：
  避免了路径过长，书写繁琐，后期迭代维护成本高的问题。
• 缺点：命名路由不能和路径跳转混合使用，容易产生 bug，因为路径跳转的匹配权重大于命令路由的匹配。

路由传参

动态路由【显示传参】

• 使用 params 接收参数，如果使用 params 传参，必须要和配置项中的动态字段对应上，否则就成为了隐式传参

隐式传参

语法：

js
//编程式导航
//使用js跳
this.$router.push({
  name: "routeName",
  params: { id: 1 },
});0

html
<!-- 声明式导航-->
<router-link :to="{name:'routeName',params:{id:10086}}"></router-link>

它不是动态路由，一般用于非动态路由中，但是，如果一个动态路由使用了隐式传参的写法，并且传参的键名没有和动态路由地段对应，那么就是隐式的传参方式，反之，有相对应的，就变成动态路由了。

• 使用 params 选项配置的传参，叫隐式传参
• 隐式传参，页面刷新，数据丢失

query 方式传参

• 使用 query 传参，既可以用 path 又可以路由名称；
• 语法：

<!-- query传参 -->
      <router-link
        :to="{ path: '/detail', query: { name: 'web1906', num: 99 } }"
        >path跳转详情</router-link
      >
      <router-link :to="{ name: 'detail', query: { name: 'web1906', num: 99 } }"
        >name跳转详情</router-link
      >

• 用 js 跳

<button @click="toDetail">用js跳</button>

export default {
  methods: {
    toDetail() {
      // query方式没有限制，使用path或name跳都可以
      this.$router.push({
        path: "/detail",
        query: {
          id: 10086,
        },
      });
    },
  },
};

路由拦截器

定义
控制路由是否可访问，用于做权限控制，比如未登录状态不可进入付费页面。

• 路由的生命周期，路由的钩子函数，路由的拦截器，路由的守卫

全局路由守卫【常用的】

• 前置路由守卫 beforeEach
• 触发时机：当进入一个路由前触发
• 语法：

router.beforeEach((to, from, next) => {
  // from 表示该路由从哪儿来，可以理解为当前的路由
  // to 表示要进入的下一个路由
  // next方法，该方法必须要调用，接收三种值：字符串的路径，布尔值，函数【特殊情况下可用】
  // 如果要禁止路由跳转，next(false)
  next();
});

组件的路由守卫【一般】

• beforeRouteLeave：当前路由离开的时候触发，多用于表单填写页面
• beforeRouteUpdate：模板页面不销毁，路由一直在更新，要实时获取路由信息，就需要使用该函数了。导航列表和子路由页面同时存在的时候。

路由独有的守卫【最不常用的】

• beforeEnter【当前路由被激活了】
• 语法：

routes:[{
  path:"*",component:Dom,beforeEnter(){}
}]

导航配置

router-link

• vue-router 内置的一个导航组件
• 属性：

1. to:跳转的地址
2. tag:指定导航的渲染 dom 类型，默认是 a 标签
3. active-class:指定当前导航的激活样式类名
4. replace:让当前的路由地址替换历史记录中的最后一个
   • 登陆之后，为了防止用户点击后退重新进入登录，开启 replace
5. append:向历史记录插入一条【默认的方式】

跳转方式

编程式导航

用 js 跳转就叫编程式导航

• $router：是路由的实例对象，拥有路由的所有功能
• push：跳转地址(向历史记录添加一条)
• replace：跳转地址(替换掉历史记录中最后一条)
• back：后退
• go：用数字跳转历史记录
• $route：当前路由的数据信息

声明式导航

用<router-link>跳转叫声明式导航