Vue2.x 基本认识四：路由

标签：title 认识 import Vue2 router path id 路由

路由认识

概念

路由（route）就是一组（key -value）对应关系。多个路由由一个路由器（router）管理。

key 为路径，value 可能是 function 或 component 。

function 是后端路由，用于请求服务器获取数据。

component 是前端路由，用于展示页面内容。但浏览器的路径改变时，对应的组件就会显示。

作用

实现单页面应用。

对 SPA 应用的理解：

单页面应用（singe page web application，SPA）
整个页面只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
数据需要通过 ajax 请求获取

安装

要使用路由，需要用到插件库：vue-router

注意：2022年2月7日，Vue3 成为了默认版本，Vuex、vue-router 也更新到了4版本了，且 4 是默认版本。这两个插件的 4 版本都只能在 Vue3 中使用。Vue2 要指定安装 3 版本的插件。

安装命令：npm i vue-router@3

安装最新版：npm i vue-router

路由基本使用

注意

组件分为一般组件、路由组件。写组件标签。通过 components 配置项配置的组件是一般组件；路由器控制挂载展示的组件是路由组件。
一般组件，放在在 components 文件夹中；路由组件，则放在 pages 文件夹中。这两个目录都在 src 目录下。
被切换走的路由组件，默认是被销毁的，需要的时候再去挂载。所以如果有消息订阅和全局事件注册，需要在 beforeDestroy() 函数中取消订阅和解除事件绑定。
每个组件都有自己的 $route 属性，里面存放这自己的路由信息。
整个应用只有一个 router，可以通过组件的 $router 属性获取到。

引入与应用 vue-router 插件

在安装完毕插件的基础上。

main.js 中加入下面内容：

import Vue from 'vue'
import App from "./App.vue"

// 引入 vue-router 插件
import VueRouter from 'vue-router'
// 引入自定义路由器（src/router/index.js）
import router from './router'
// 应用 vue-router 插件
Vue.use(VueRouter)

const vm = new Vue({
    render: h => h(App),
    router: router // 配置路由器
}).$mount("#root")

自定义路由器内容

　　自定义路由器写在一个 js 文件中，就是 src/router/index.js

/**
 * 该文件专门用于创建整个应用的路由器
 */
// 引入 vue-router 插件
import VueRouter from 'vue-router'
// 引入自定义组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

// 创建并暴露一个路由器
export default new VueRouter({
    // routes 下面是一级路由
    routes:[
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 定义 Home 组件的子路由规则
            children: [
                {
                    path: 'news', // 子路由 path 值前面不要斜杆
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        }
    ]
})

使用路由：一级路由

<template>
    <div id="app">
        <div class="row">
            <Banner/>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!-- 使用原始 a 标签跳转页面 -->
                    <!-- <a class="list-group-item active" href="./about.html">About</a>
                    <a class="list-group-item" href="./home.html">Home</a> -->

                    <!-- 
                        使用路由标签跳转页面 
                        使用的是 router-link 标签
                        to 属性的值是路由器中的 path 路径
                    -->
                    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
                    <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!-- 指定路由组件呈现的位置：通过 router-view 标签 -->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Banner from "./components/Banner.vue";
    export default {
        name: 'App',
        components: {Banner},
        data() {
            return {}
        }
    }
</script>

路由使用：多级路由（嵌套路由）

<template>
    <div>
        <h2>我是Home的内容</h2>
        <ul class="nav nav-tabs">
            <li>
                <!-- 使用多级路由时，to 属性必须带上父级路由的 path 路径 -->
                <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
            </li>
            <li>
                <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
            </li>
        </ul>
        <div>
            <!-- 路由组件展示的地方 -->
            <router-view></router-view>
        </div>
    </div>

</template>
<script>
export default {
    name: 'Home'
}
</script>

路由命名&路由传参

路由命名

简而言之，就是在配置路由地址时，配置 name 属性，后面跳转时可以根据 name 属性值跳转，避免多级路由时，to 属性内容写很长。

/**
 * 该文件专门用于创建整个应用的路由器
 */
// 引入 vue-router 插件
import VueRouter from 'vue-router'
// 引入自定义组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    // routes 下面是一级路由
    routes:[
        {
            name: 'aboutN',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 定义 Home 组件的子路由规则
            children: [
                {
                    path: 'news', // 子路由 path 值前面不要斜杆
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'detailN',
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

路由传参（query 传参）& 使用路由名称实现跳转

<template>
    <div>
        <ul>
            <li v-for="item in messages" :key="item.id">
                <!-- 路由跳转，并携带 query 传参，to 字符串写法 -->
                <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>
                <!-- 路由跳转，并携带 query 传参，to 对象写法 -->
                <router-link 
                    :to="{
                        path: '/home/message/detail',
                        query: {
                            id: item.id,
                            title: item.title
                        }
                    }">
                    {{ item.title }}
                </router-link>
                <!-- 
                    使用路由名称跳转
                    下面 to 属性配置的对象中，name 属性值与路由配置中 detail 路由配置的 name 属性值一致 
                  -->
                <router-link 
                    :to="{
                        name: 'detailN',
                        query: {
                            id: item.id,
                            title: item.title
                        }
                    }">
                    {{ item.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'Message',
    data() {
        return {
            messages:[
                {id:'001', title:'消息001'},
                {id:'002', title:'消息002'},
                {id:'003', title:'消息003'}
            ]
        }
    }
}
</script>

接收路由 query 传参

<template>
    <div>
        <h3>消息ID：{{ $route.query.id }}</h3>
        <h3>消息标题：{{ $route.query.title }}</h3>
    </div>
</template>
<script>
    export default {
        name: 'Detail'
    }
</script>

路由传参（params 传参）：在 path 配置中定义占位

/**
 * 该文件专门用于创建整个应用的路由器
 */
// 引入 vue-router 插件
import VueRouter from 'vue-router'
// 引入自定义组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    // routes 下面是一级路由
    routes:[
        {
            name: 'aboutN',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 定义 Home 组件的子路由规则
            children: [
                {
                    path: 'news', // 子路由 path 值前面不要斜杆
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'detailN',
                            /**
                             * 路由 params 传参必须要占位（下面一共两个占位，占位不懂就学node）
                             * 在 params 传参 to 字符串写法时，参数名称就是冒号后面部分
                             */
                            path: 'detail/:id/:title',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

路由传参（params 传参）：两种写法

<template>
    <div>
        <ul>
            <li v-for="item in messages" :key="item.id">
                <!-- 使用 params 传参，to 字符串写法 -->
                <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>
                <!-- 
                    使用 paras 传参，to 对象写法。
                    注意，对象写法只能根据路由名称跳转，不能使用 path 跳转。
　　　　　　　　　　　　且，params 对象中，key 是什么，在接收时就用什么
　　　　　　　　　　　　这里与字符串写法参数名就是占位有点区别，但这种传参也依赖于占位，只是不用占位的名称作为参数名称
                  -->
                <router-link 
                    :to="{
                        name: 'detailN',
                        params: {
                            id: item.id,
                            title: item.title
                        }
                    }">
                    {{ item.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'Message',
    data() {
        return {
            messages:[
                {id:'001', title:'消息001'},
                {id:'002', title:'消息002'},
                {id:'003', title:'消息003'}
            ]
        }
    }
}
</script>

接收路由 params 传参

<template>
    <div>
        <h3>消息ID：{{ $route.params.id }}</h3>
        <h3>消息标题：{{ $route.params.title }}</h3>
    </div>
</template>
<script>
    export default {
        name: 'Detail'
    }
</script>

路由的 props 配置

功能：简化路由参数接收。

路由配置中使用 props 配置

/**
 * 该文件专门用于创建整个应用的路由器
 */
// 引入 vue-router 插件
import VueRouter from 'vue-router'
// 引入自定义组件
import About from '../pages/About'
......

// 创建并暴露一个路由器
export default new VueRouter({
    // routes 下面是一级路由
    routes:[
        {
            name: 'aboutN',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 定义 Home 组件的子路由规则
            children: [
                {
                    path: 'news', // 子路由 path 值前面不要斜杆
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'detailN',
                            /**
                             * 路由 params 传参必须要占位（下面一共两个占位，占位不懂就学node）
                             * 在 params 传参 to 字符串写法时，参数名称就是冒号后面部分
                             */
                            // path: 'detail/:id/:title',
                            path: 'detail',
                            component: Detail,

                            // 写法一：值为对象，该对象中所有 key-value 都会以 props 的形式传给当前组件（只能写死key-value）
                            // props: {id:'007', title:'凌凌漆'}
                            // 写法二：值为布尔值，把收到的所有参数，以 props 的形式传给当前组件（只能是 params 传参方式）
                            // props: true
                            // 写法三（推荐）：值为函数，把收到的所有参数，以 props 的形式传给当前组件（params 和 query参数都行）
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.id
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

组件传参方式不变

<template>
    <div>
        <ul>
            <li v-for="item in messages" :key="item.id">
                <!-- 使用 query 传参，to 对象写法。 -->
                <router-link 
                    :to="{
                        name: 'detailN',
                        query: {
                            id: item.id,
                            title: item.title
                        }
                    }">
                    {{ item.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

组件中使用 props 配置接收参数

注意，接收参数名与路由配置 props 中定义的 key 一致

<template>
    <div>
        <h3>消息ID：{{ id }}</h3>
        <h3>消息标题：{{ title }}</h3>
    </div>
</template>
<script>
    export default {
        name: 'Detail',
        props: ['id', 'title']
    }
</script>

标签：title,认识,import,Vue2,router,path,id,路由
From： https://www.cnblogs.com/zhousjcn/p/17506129.html