Vue-56、Vue技术路由的使用

一叶飘零晋2024-02-12 10:35

路由

1、理解：一个路由（route）就是一种映射关系（key-value），多个路由需要路由器（router）进行管理。

2、前端路由：key是路径，value是组件

1、基本使用

vue-router3 只能在vue3中使用

vue-router3 才能在vue2中使用

1、vue2安装

javascript 复制代码

npm i vue-router@3  或者cnpm i vue-router@3

vue3安装

javascript 复制代码

npm i vue-router@4  或者cnpm i vue-router@4

2、应用插件：Vue.use(VueRouter)

3、编写router配置项

javascript 复制代码

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-Router'
//引入组件
import About from '../components/About'
import Home from  '../components/Home'
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
});
export default router;

4、实现切换（active-class可配置高亮样式）

javascript 复制代码

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

5、指示展示位置

javascript 复制代码

<router-view></router-view>

2、几个注意点

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2、通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3、每个组件都有自己的$store属性，里面存储着自己的路由信息。

4、整个应用只有一个router,可以通过组件的$router属性获取到。

3、多级路由

1、配置路由规则，使用children配置项

javascript 复制代码

routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        },
    ]

2、跳转（要写完整路径）

javascript 复制代码

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>