当前位置：首页 > news >正文

Vue Vue-route （2）

news 2025/7/2 10:43:03

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue-route重定向和声明式导航

Vue-route路由

重定向

首页默认访问

不存在匹配

声明式导航

路由原理

使用示例

自定义class类

Tag设置

版本4路由

改变

示例

总结

Vue-route路由

重定向

首页默认访问

希望访问网站域名时，直接访问film组件。

在router/index.js中配置根路径默认组件.

示例如下：

// 配置表
const routes = [{path: '/filems',name: 'filems',component: Films},{path: '/cinemas',name: 'cinemas',component: Cinemas},{path: '/center',name: 'center',component: Center},{path: '/',name: 'films',component: Films}
]

不存在匹配

当输入不存在的路径时，匹配所有路径。

示例如下：

{path: '/',name: 'films',component: Films},{path: '*',component: Films}

按照从上到下的顺序进行匹配。

声明式导航

监听路由改变，来实现导航高亮。

路由原理

1.hash路由 location.hash 切换

window.onhashchange 监听路径的切换

2.history路由 hostory.pushState 切换

window.onpopstate 监听路径的切换

使用示例

使用router-link替换原来的a标签来实现跳转；

并给跳转后的路径设置样式。

点击后，当前路由上自动加上类。

示例如下：

<template><div><ul><li><router-link to="films">电影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped>
.router-link-active {color: red;
}
</style>

效果：

自定义class类

可以在router-link上自定义class类，在渲染后也可以应用上。

示例如下：

<template><div><ul><li><router-link to="films" active-class="testActive">电影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped>
.router-link-active {color: red;
}
.testActive {font-size:20px;
}
</style>

Tag设置

Tag设置渲染元素，不设置默认渲染为a标签。

示例如下：

<template><div><ul><!-- 声明式导航 （3之前 包含3） --><li><router-link to="films" active-class="testActive" tag="li">电影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>

版本4路由

改变

4之后这个语法就不好用了，需要修改为：

示例

把原来的导航改为版本4的导航。

示例如下：

<!-- 版本4 导航 --><ul><router-link to="films" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">电影</li></router-link><router-link to="cinemas" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">影院</li></router-link><router-link to="center" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">我的</li></router-link></ul>