【Vue】Vue Router 路由

介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

官网文档：https://router.vuejs.org/zh/introduction.html

安装 vue-router：

npm install vue-router // 默认安装最新稳定版

npm install vue-router@3 // 安装 3.X vue-router vue2.X 使用

一个重要概念

Vue 的是单页程序，路由跳转是把 内容展示在 <router-view> 标签上

也能实现页面的条件

创建路由 管理文件

在 src里 新建 router 文件夹，在新建 index.js

// src/router/index.js 
import Vue from "vue";
import VueRouter from "vue-router";
import Login from '../components/Login'
import Register from '../components/Register'

Vue.use(VueRouter) // 使用 VueRouter

export default new VueRouter({ // 导出  VueRouter 实例
    routes: [{
        //登录
        path: '/login', // 请求路径
        name: 'login',   // 定义名字 为了 更好的传递参数
        component: Login, // 展示的组件
    },
    {   //注册
        path: '/register',
        name: 'register',
        component: Register,
    }]
})

在 src/main.js 引入路由

import Vue from 'vue';
import router from './router'; // 自动扫描 index.js 文件
import App from './App';

new Vue({
  el: '#app',
  router,  // 添加
  render: h => h(App)
});

路由跳转

<router-link> 最终会被渲染成 <a> 标签

<router-link to="/register"><h2>注册</h2></router-link>
<router-link to="/login"><h3>登录</h3></router-link>

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

<!-- 路由定义了名字才能这样 传递 参数 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

路由模式

两种路由方式都不会重新加载页面

hash 路由模式（默认值）：http://localhost:8080/#/register

history 路由模式：http://localhost:8080/register

export default new VueRouter({
    mode: 'history',
    routes: [...]
})

路由传参

路由参数的传递，设置后，在 $route.params获取参数值

export default new VueRouter({
    routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User },
    // 设置 多段路径参数
    { path: '/user/:username/post/:id', component: User }
  ]
})
/*

/user/12  --> $route.params --> { id: 12}

/user/Bob/post/2 --> $route.params --> { username: 'Bob', id: 2}

*/

使用 $route.params 会造成严重耦合，所有还有一种方式传递 路由参数

export default new VueRouter({
    mode:'history',
    routes: [{
        path: '/user/:id',
        name: 'user',
        component: User,
        props: true, // 设置 props 为 ture
    }]
})

捕获所有路由或 404 Not found 路由

路由是支持 正则表达式 匹配的，匹配的优先级就是定义路由的顺序

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如

export default new VueRouter({
    routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User },
    // 设置 多段路径参数
    { path: '/user/:username/post/:id', component: User },

    { // 通配 会匹配所有路径
      path: '*' },
    { // 会匹配以 `/user-` 开头的任意路径
      path: '/user-*' }
  ]
})

重定向

export default new VueRouter({
    routes: [
    { path: '/a', redirect: '/b' },  // 直接重定向
    { path: '/c', redirect: { name: 'login' }} // 可以使用 name

  ]
})

嵌套路由

效果其实是 在子组件中 渲染界面

export default new VueRouter({
    routes: [
    // 动态路径参数 以冒号开头
    { 
        path: '/user/:id', 
        component: User,
         children: [
            {
              // 当 /user/:id/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 当 /user/:id/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
       ]

    },
})