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

路由

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>
相关推荐
Sun_light14 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子17 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000017 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心17 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再18 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了21 分钟前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm22 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v26 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠28 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue30 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html