Vux系列路由篇--基础篇

原创于 2020-03-20 17:10:10 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

vue 专栏收录该内容

9 篇文章

订阅专栏

本文深入讲解Vue.js中的路由配置与使用技巧，包括一般路由、动态路由、嵌套路由、命名路由、命名视图、重定向、别名及编程式导航等核心概念。详细介绍如何配置路径、名称、组件、子路由，并解释动态参数、命名视图的作用及实现方法。

1、一般路由

1.1、一般路由的配置
{
  	path: '/',   
  	name: 'Home',  
  	component: Home
}
path : 路由导向的 url
name : 路由的名字，方便下面命名路由使用
component : 路由导向的视图文件（一般使用懒加载）
懒加载： () => import('@/views/argu.vue')

1.2、一般路由的使用

<router-link to="/about">About</router-link>

<router-link to="路由的 path ">

2、动态路由匹配

2.1、动态路由的配置
{
   	path: '/argu/:name',
   	component: () => import('@/views/argu.vue')
 }
即 path 后面添加 /:传参名
2.2、动态路由的使用

<router-link to="/about/duck">About</router-link>
即路劲后面添加 /参数

可以使用$route.params.duck(参数名) 获取

3、嵌套路由

3.1、嵌套路由的配置
{
       path: '/parent',
       name: 'parent',
       component: () => import('@/views/parent.vue'),
       children: [        // 嵌套路由
         {
           path: 'child',
           component: () => import('@/views/child.vue')
         }
       ]
 }
children --> 子路由
注意：子路由的path不需要添加 /，他会自己补全
3.2、嵌套路由的使用

在如果父路由有添加 <router-view>
则输入子路由的 url地址，可以同时查看父路由的视图 parent/child

4、命名路由

在路由配置中，设置了属性name的值 name: 'parent'

就可以在使用时，使用命名路由的方式
<router-link :to="{ name: 'parent' }">parent</router-link>

5、命名视图

5.1、作用

在一个同一个页面上显示多个视图，让每一个视图显示在指定的位置

5.2 、命名视图的配置
{
    path: '/named_view',        
    components: {
      default: () => import('@/views/child.vue'),
      tel: () => import('@/views/tel.vue')
    }
}
注意：这里的 components 必须有个 s
5.3、命名视图的使用
在想要查看视图的组件添加
<router-view/>       // 显示 default的视图
<router-view name="tel" />  // 显示 tel 的视图

6、重定向

6.1、作用

可以设置某个url 跳转到你想要访问的组件

6.2、重定向的配置
1、通过 url 的方式
{
    path: '/main',
    redirect: '/home'
}
2、通过命名路由的方式
{
    path: '/main',  
    redirect: {
      name: 'Home'
 }
}
3、通过方法的方式
{
    path: '/main',  
    redirect: to => '/'  // es6箭头方法简写
}

7、别名

7.1、别名的配置

{
    path: '/',
    alias: '/home_page',  // 别名
    name: 'Home',
    component: Home
}

访问方式可以直接访问别名 /home_page

8、编程式导航（重点）

8.1、获取路由实例

this.$router

8.2、路由实例的方法
this.$router.go(n) 跳到第n层的视图

如 this.$router.go(-1) 即返回到上一层

this.$router.back() 返回上一页，跟 go(-1) 一样
this.$router.push('url') 跳转到 url 对应的视图
如 this.$router.push('/parent') 即跳转到 parent视图
// 配合命名路由
this.$router.push({
    name: 'parent'
})
this.$router.replace() 替换
使用后不会有跳转记录，没有回退
8.3、路由带参数

传参： query: { name: 'duck'}

params: { name : 'duck'}

接收：query --> $route.query.name

param --> $route.params.name