vue中路由router切换

一.实现一个简单的路由切换

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

yard add vue-router

2.注册一个路由实例

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

3. 把这个注册的路由添加到vue实例中

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

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

<router-view></router-view>

在vue中常用link代替a标签

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

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

可以用tag更改默认标签

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

路由重定向 redirect

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

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

高亮显示当前元素

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

也可自定义类名

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

在路由切换中transiton的使用

路由切换动画，用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{