vue路由的基本使用
- vue-router简介
- 一、路由配置和使用
-
- 1、安装
- 2、创建路由实例
- [2、在组件中引用路由 router-view ,如APP根组件中直接引用：](#2、在组件中引用路由 router-view ,如APP根组件中直接引用：)
- 3、最后还需要把路由挂载到APP实例中，在==main.js==中注册路由：
- 二、路由重定向与别名
- 三、声明式导航
- 四、嵌套路由
- 四、命名路由
- 五、取消路由组件在前进后退
- 命名路由
- 二、嵌套（多级）路由
vue-router简介
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
一、路由配置和使用
1、安装
打开项目终端，通过npm安装
c
npm install vue-router@42、创建路由实例
在项目中src目录想创建Router文件夹，新建index.js文件，在这个文件下配置路由：
c
import { createWebHashHistory, createRouter } from 'vue-router'
import Center from '../view/Center.vue' //引入组件路径（路由组件尽量放在view文件夹下）
import Home from '../view/Home.vue'
const routes = [
{
path: '/Center', //跳转的路径
name:'Center ' //命名路由，也可以不写
component: Center //跳转到对应的组件
},
{
path: '/Home',
component: Home
},
]
const router = createRouter({
history: createWebHashHistory(),//hash的模式，如#/home，#/center 带#号的路径
routes,//`routes:routes`的缩写
})
export default router2、在组件中引用路由 router-view ,如APP根组件中直接引用：
c
<template>
app
<!--插槽-->
<router-view></router-view>
</template>3、最后还需要把路由挂载到APP实例中，在main.js中注册路由：
c
import { createApp } from 'vue'
import App from './App.vue'
import router from './Router' //直接导入Router文件夹，会自动找到index.js这个文件
const app=createApp(App)
app.use(router) //注册路由插件
app.mount('#app')直接输入对应的路径，显示对应的组件，到此路由的基本模型已经做好了
二、路由重定向与别名
- 重定向也是通过 routes 配置redirect来完成，下面例子是从 /home 重定向到 /：
c
const routes = [
{
path: '/home',
redirect: '/'
}
]- 重定向的目标也可以是一个命名的路由：（路由通过name来命名）
c
const routes = [{ path: '/home', redirect: { name: 'center' } }]- 常规参数只匹配url片段之间的字符，用 / 分割。如果我们想匹配任意路径，我们可以自定义的路径参数正则表达式，在路径参数后面的括号中加入 正则表达式：
c
const routes = [
{
path: '/:pathMatch(.*)*', //pathMatch只是占位符，任意字母都可以
name:'NotFound',
component: NotFound
},
]- 别名 用alias属性表示，当url匹配到别名/abc，也会跳转到组件center中去
c
const routes = [
{
path: '/Center',
component: Center ,
alias:'/abc' //注意别名有个/；也可以用数组alias: ['/abc', 'aaa']
},
]三、声明式导航
1、传统的导航
通过a标签跳转
c
<div class="tabbar">
<ul>
<li><a href="#/home">首页</a></li>
<li><a href="#/films">影院</a></li>
<li><a href="#/center">我的</a></li>
</ul>
</div>2、通过路由router-link
- to跳转到对应的路由，不需要加#号
- 不过标签会带a标签的样式，底部会有个下划线不太好看，后面我们也可以通过$route.push跳转的方法
c
<ul>
<li><router-link to="/home">首页</router-link> </li>
<li><router-link to="/films">影院</router-link> </li>
<li><router-link to="/center">我的</router-link></li>
</ul>- 通过active-class="kerwin"来命名，使选中的显示高亮
c
<template>
<div class="tabbar">
<ul>
<li>
<router-link to="/home" active-class="kerwin">首页</router-link>
</li>
<li>
<router-link to="/films" active-class="kerwin">影院</router-link>
</li>
<li>
<router-link to="/center" active-class="kerwin">我的</router-link>
</li>
</ul>
</div>
</template>
<script setup>
</script>
<style scoped>
.kerwin{
color: red;
}
.tabbar{
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
bottom: 10px;
}
.tabbar ul{
display: flex;
}
.tabbar ul li{
flex:1;
}
</style>如图所示：
四、嵌套路由
一个路由组件下面，再嵌套路由，要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children：
c
const routes = [
{
path: '/user',
component: User,
children: [
{
// 当 /user/profile 匹配成功
// UserProfile 将被渲染到 User 的 <router-view> 内部
path: 'profile',
// path: '/user/profile'的简写，通过http://localhost:5173/#/user/profile访问
component: UserProfile,
},
{
// 当 /posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: '/posts', //注：可以通过http://localhost:5173/#/posts访问
component: UserPosts,
},
],
},
]注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。