vue-router4.x【基础篇】，总结

一、创建路由

路由模式配置为 hash模式开发和生产环境下都没问题。

如果配置为 history 模式，开发环境下没问题，可部署到生产环境时，刷新会发起请求，路径匹配服务器找不到得到 404 报错。

需要服务器配置指向 index.html ，所有未找到的路径都会去找 index.html，就不会 404 错误了。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
   // 路由模式   createWebHashHistory、createWebHistory
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

二、路由参数、路由别名

路由参数使得路由更灵活，多个用户多个 id，都匹配到同个组件下，且获取 id 更方便    $route.params 获取参数

路由别名，可以用定义的路由别名访问对应的路由，如下例子，访问   /people/:id  、 /list/:id 和访问 /todo:id 是一样的效果

    {
      path: '/todos/:id',
      name: 'todos',
      // 有参数时，别名也要包含参数
      // alias: '/people/:id', 单个别名
      alias: ['/people/:id', '/list/:id'] , // 多个别名
      component: () => import ('@/views/todos/index.vue');,
    },    

三、嵌套路由

路由可以嵌套多层路由，不过得记得再父路由组件内添加 <router-view> 标签。

下面例子中，Home 组件和 First 组件 得 添加 <router-view> 标签, 才能显示出嵌套的子路由组件

routes: [
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'first',
          name: 'first',
          component: First
          children: [
             {
                  path: 'second',
                  name: 'second',
                  component: Second
             }
          ]    
        },
      ]
    }
] 

 

四、路由重定向

重定向可以使访问某路径的时候，自动重定向，显示为你定向的目标

    {
      path: '/',
      //  可以是一个字符串路径
      //  redirect: '/todos',
      // 可以是一个路径对象
      //  redirect: { name: 'todos' }
      // 也可以是一个方法
      redirect: to => {
          // 方法接收目标路由作为参数
          // return 重定向的字符串路径/路径对象
          return { path: '/todos', query: { q: to.params.id} }
        },
    },    
    
    {
      path: '/todos',
      name: 'todos',
      component: () => import ('@/views/todos/index.vue');,
    },    

五、命名视图

可以同时 (同级) 展示多个视图，而不是嵌套展示。

下面例子中，同一路由下，一个视图使用一个组件渲染

<router-view name="LeftSidebar"></router-view>
<router-view  ></router-view>  // name 默认为 default
<router-view name="RightSidebar"></router-view>
   {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },

 

六、路由向组件传参

不用通过 $route.params 或 $route.query 获取，路由可直接传给子组件，子组件通过 props 接收

// 布尔值形式
{ path: '/todos/:id', component: Todos, props: true }
// 路由参数 id 会被传到Todos组件 props 内

export default {
  props: ['id']  
}

// 有多个命名视图时,每个视图都必须配置 porps
{ path: '/todos/:id', component: {defalut: Todos, Slidebar }, 
   props: { default: true, sidebar: false } 
 }

// 对象形式
{ path: '/todos', component: Todos, 
   props: { info: 123456 } //info会被传到Todos组件内
 }
// 函数形式, 参数是当前路由
{ path: '/todos', component: Todos, 
   props: route => ({ query: route.query.q }) // query 会被传到Todos组件内
 }

 

七、编程式导航

1、router.push()  路由跳转

<router-link to="/xx"> 一样功能

参数：字符串路径  、 路径对象

router.push('/user')
router.push({ path: '/user',query: { q: 123}})

// 注意点！ path 不能和 params 一起用

// 有 path , params 被忽略
router.push({ path: '/user', params: { username: 'eduardo' } })
// 解决方案
router.push({ name: 'user', params: { username: 'eduardo' } })

2、router.replace() 

和 router.push 用法一样，不同点是，router.replace 不会产生历史记录

router.push({ path: '/xx', replace: true })  // 一样功能

<router-link to="/xx" replace> // 一样功能

router.replace('/user')
router.replace({ path: '/user',query: { q: 123}})

3、router.go()  历史记录跳转

参数： 数值，正数为前进，负数为后退。无效的数值静默失败

router.go(-1) // 后退1
router.go(3) //前进3
router.go(9999) // 失效

 

八、路由匹配

配置路由的路径可用正则表达式，通常用在匹配无配置路由路径页面。

// 匹配所有无对应路由的路径 放`$route.params.pathMatch` 下
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

{ path: '/todos',  name: 'todos',component: Todos},

上面例子中如果路径是 /todos，会渲染 Todos 组件，其他路径，会匹配到 NotFound 组件，路径会被当作路由参数，放在 pathMatch 属性下

// 匹配所有 user-开头 无对应路由的路径 放`$route.params.pathMatch` 下
{ path: '/user-:pathMatch(.*)',  name: 'NotFound',component: NotFound },
// 匹配所有数值 无对应路由的路径 放`$route.params.pathMatch` 下
{ path: '/:pathMatch(\\d+)+',  name: 'NotFound',component: NotFound },