vue中路由router切换

最新推荐文章于 2024-11-28 17:50:18 发布

原创

最新推荐文章于 2024-11-28 17:50:18 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了Vue Router的使用，包括如何实现简单的路由切换，使用`router-link`代替`a`标签，路由重定向，高亮显示当前元素，`transition`在路由切换中的应用，以及路由传参的方法。此外，还讨论了路由嵌套和命名视图的概念，为在Vue项目中灵活处理路由提供了全面指导。

前端路由使用hash值来切换，适用于单页面应用
vue中router的简单使用
1.下载vue-router.js 并安装

yard add vue-router

2.注册一个路由实例

const router = new VueRouter({
routes:[ 匹配路由规则 ]
})

let vm = new Vue({
el:"#app",
data:{},
router 此处用的是es6语法
})

4.通过router-view引用到页面上

<router-view></router-view>

router-link默认是a标签，页面上实际展示的是a标签实现路由跳转功能

<router-link to=’/login’>登录</router-link>

可以用tag更改默认标签

<router-link to=’/login’ tag=“span”>登录</router-link>

根标签，重定向，默认显示某个组件

{ path: ‘/’, redirect: ‘/login’ }

router-link-active 设置当前元素的css样式

也可自定义类名

在注册路由中设置：linkActiveClass:“myclass”

路由切换动画，用transtion包裹，用法同前面的transition动画一致

<transition name=“fade” mode=“out-in”>
<router-view></router-view>
</transition>

1.问号传参

<router-link to='/login?id=20'>登录</router-link>

获取时用 this.$route.query.id 获取参数

2.变量名传参

// 参数名与参数一一对应
<router-link to='/register/80/wang'>注册</router-link>
// 匹配路由
{
   
    path: '/register/:id/:name', component: register }

获取时用 this.$route.params 获取参数

// 高亮显示当前元素
/* .router-link-active{
            background: orange;
            color: #