先引进一级路由 使用rooter-link标签,使用import 路由名 ‘路径名’ 来注册并调用路由
import Films from '@/views/Films.vue'
{
path: '/films',
component: Films,
}
再进行重定向操作,可以在URL地址上随机填写字符串,但url地址匹配不到路径,只能寻找重定向。使得所有匹配不到路径的url地址跳转到http://localhost:8080/#/films下
{
path: '*',
redirect: 'films'
// }
声明式导航
使用router-link属性 to表示要跳转的地址是,可以自定义样式名,有个tag属性(在Vue4中不支持),能将router-link父元素渲染成指定的标签中。其中router-view是路由容器,类似于插槽, 路由中的原理:
hash路由==>location.hash 切换
window.onhashchange 监听路径的切换
history路由==>history.pushState切换
window.onpopstate监听路径的切换
<div>
<ul>
<li>
<!-- 声明式导航 -->
<router-link to="/films" active-class="dqfactive">电影</router-link>
<!-- 可以自定义样式名 -->
<!-- tag属性 将会渲染成哪个节点 新版本不支持-->
</li>
<li>
<!-- 声明式导航 -->
<router-link to="/cinemas" active-class="dqfactive">影院</router-link>
</li>
<li>
<!-- 声明式导航 -->
<router-link to="/center" active-class="dqfactive">个人</router-link>
</li>
</ul>
<router-view></router-view>
<!-- 路由容器 -->
<!-- 路由原理
hash路由==>location.hash 切换
window.onhashchange 监听路径的切换
history路由==>history.pushState切换
window.onpopstate监听路径的切换
-->
<!-- vue4中 tag用不了 -->
</div>
嵌套路由
在Films文件夹下,创建两个子路由文件,再在父界面的声明路由中,加入Chirdren列表。
path: '/films',
component: Films,
// 嵌套路由 嵌套形式
children: [
{
path: '/films/nowplaying',
component: Nowplaying
},
{
path: '/films/comingsong',
component: Comingsong
},
{
替换形式的嵌套路由,再注册路由,path属性中,写在父路由/子路由中
{
// 嵌套路由 替换形式
path: '/cinemas/search',
component: Search
}
编程式导航
给一些元素绑定点击等操作时,可以使用dom原生的方法,其中this.$router能匹配到路由对象,它的back方法能返回上一个界面,官方提供的路径跳转方式 this.$router.push(`/detail/${id}`),其中后面$id能获取到随着网页传过来的id值,再通过后端接口来获取详细信息,从而完成详细页面的编写。
动态路由,路由的命名
{ // 动态二级路由
name: 'dqfDetail', // 命名路由
path: '/detail/:id',
component: Detail
},
路由模式
在注册router是会提供mode属性,其中hash路径中会出现#,影响美观,history没有#,url地址很简洁,但history属性上线后,后端找不到接口,会导致404not found
全局路由拦截
如果想做一个登录后才能访问的界面,可以用全局路由来拦截,router.beforeEach方法有三个参数,第一个参数to 是进入路由模块,第二个参数是离开路由模块,第三个方法next()是指进入该路由,所以要使用if-else语句进行判断条件。
// 全局拦截 路由拦截 路由守卫
router.beforeEach((to, from, next) => {
console.log(to.fullpath)
if (to.meta.isdqf) {
// 判断本地存储中是否token 判断是否登录
if (localStorage.getItem('token')) {
next()
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 第一个参数随意
}) // 重定向
}
} else {
next() // 函数 继续跳转界面
}
})
export default router
路由懒加载
发布后的小程序或者网页,所有的js文件合到一个文件中,会导致进界面的时候卡顿,处理方法,对一些路由使用懒加载
{
path: '/order',
component: () => import('@/views/Order')
// 懒加载