1.安装npm install vue-router
2.在一个模块化工程中使用它,必须要用vue.use()进行手动安装
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter )//手动安装
var routerObj=new VueRouter ({//这个是放配置对象的
//routers这个配置对象 router表示路由匹配规则的意思
routes:[
//每个路由规则,都是一个对象,这个规则的身上有两个必须的属性path和component
//path表示监听哪个路由链接地址,
//component表示如果路由是当前匹配到的path则展示component属性对应的那个组件,属性值必须是组件模板对象,不能是字符串
//redirect属性,表示重定向,就是一开始默认是那个组件
{path:'/',redirect:login}//一打开默认是login组件
{path:'/login',component:login}
]
})
//routerObj关联vue
var vm=new Vue({
el:'app',
data:{},
router:routerObj//路由匹配规则注册到vm中
})
html
//方法一改变url地址栏
//<a href='#/login'>登录</a>
//方法二改变url地址栏用vue-router提供的路由组件,默认是渲染为a标签,tag表示可以更改为其他的标签
<router-link to='#/login' tag='span'></router-link>
//在HTML中用vue-router提供的路由组件router-view 专门用来做占位符,匹配成功后就会展示到router-view中去
<router-view></router-view>
给选中的那个组件给它高亮,只需在router-link-active这个css类加样式就可以了
路由传参
1.可以在router-link to后面传参,但是无需在路由规则里改,路由规则还是之前那个< router-link to=’#/login?id=10&name=123’ tag=‘span’></ router-link>在要用的组件当中利用this.$route.query
2.可以在路由规则里改{path:’/login:id’,component:login}然后在< router-link to=’#/login/123’ tag=‘span’></ router-link>传
路由里嵌套路由
{
path:'/aaa',
component:login,
//使用children属性时的path不要带‘/’,否则永远从根路径开始请求
children:[
{path:'login',component:login}
]
}
多个路由展示在路由规则中的component变成components,components是一个对象
<router-view></router-view>
<router-view name='left'></router-view>
<router-view name='right'></router-view>
{path:'/',components:{
'default':top//默认放top组件,default名字随意,但是要跟router-view的name要一致
'left':left//默认放left组件,left名字随意,但是要跟router-view的name要一致
'right':right//默认放right组件,right名字随意,但是要跟router-view的name要一致
}
可以使用this.$router.push(location)来修改地址栏