Vue路由

Vue-Router

起步

安装Vue-Router注意，Vue2支持Vue-Router@3版本，Vue3支持Vue-Router@4版本，不按规定安装，可能会出现报错得情况

1
npm install vue-router@版本

简单使用

1. 首先在main.js里引入vue-router组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import App from './App.vue'
import store from "@/store"
// 引入Vue Router
import VueRouter from "vue-router";

Vue.config.productionTip = false
//使用Vue-Router
Vue.use(VueRouter)

new Vue({
    render: h => h(App),
    store,
    router
}).$mount('#app')
2. 创建router文件夹，用于配置router信息，**此示例，会出现嵌套路由和命名路由的使用**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import VueRouter from "vue-router";


//创建一个路由器
const router = new VueRouter({
    routes: [
        {
            //命名路由，在嵌套路由过多得情况下，可以直接使用命名路由，减少代码量
            name: 'about',
            path: '/about',
            component: About
        },
        {
            path: '/index',
            component: Index,
            children: [{
                path: 'catLog',
                component: CatLog
            }]
        }
    ]
})

export default router
3.接下来只需要在需要路由得地方进行引入即可

1
2
3
4
5
6
7
8
<!-- 命名路由使用 -->
<router-link :to="{name:'about'}">Go to About</router-link>
<router-link to="/index">Go to Index</router-link>
<!-- 嵌套路由使用 -->
<router-link to="/index/catLog">Go to CatLog</router-link>

<!-- 配合router-view使用 -->
<router-view/>

路由传参

query传参

传递参数

  1. 第一种，拼参法
    1
    2
    3
    <router-link :to="`/index?id=${id}$title=${title}`">Go to Index</router-link>
    <!-- 配合router-view使用 -->
    <router-view/>
  2. 第二种，对象法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <router-link :to="{
        path:'index',
        query:{
            id:...,
            title:...
        }
    }">
        Go to Index
    </router-link>
    <!-- 配合router-view使用 -->
    <router-view/>

    接收参数

    1
    2
    $router.query.id
    $router.query.title

params传参

相较于query传参，params传参需要在路由上配置参数信息

配置路由

1
2
3
4
5
6
7
8
const router = new VueRouter({
    routes: [
        {
            path: '/about/:id/title',
            component: About
        }
    ]
})

传递参数，注意,使用对象写法，不可以使用path配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 第一种写法 -->
<router-link to="`/about/${id}/${title}`">Go to Index</router-link>
<!-- 第二种写法 -->
<router-link to="{
    <!-- 坑，注意记住使用name属性，不然会出错 -->
    name:'about',
    params:{
        id:...,
        title:...
    }
}">
Go to Index
</router-link>
<!-- 配合router-view使用 -->
<router-view/>

接收参数

1
2
$router.params.id
$router.params.title

props配置

1
2
3
4
5
$router.params.id
$router.params.title
$router.params.name
$router.params.age
$router.params.content

以上参数接收过多，导致代码复杂，为了简化参数接收过程，可以通过配置props属性，来简化代码

配置

  1. 第一种，对象写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const router = new VueRouter({
        routes: [
            {
                path: '/about/:id/title',
                component: About,
                props:{a:'1',b:'2'}
            }
        ]
    })

  2. 第二种写法，布尔值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const router = new VueRouter({
        routes: [
            {
                path: '/about/:id/title',
                component: About,
                props:true
            }
        ]
    })

    接收参数

和组件接收外部参数类似，都是通过props在组件内接收

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <ul>
        <li>{{id}}</li>
        <li>{{title}}</li>
    </ul>
</template>

<script>
    export default{
        name:'Detail',
        props:['id','name'],
    }
</script>