vue 中使用路由vue-router

一。路由vue-router 基本加载
1.安装
npm install --save vue-router
2.在main.js中引用
import VueRouter form “vue-router”
Vue.use(VueRouter)
3. 在main.js中 new Vue中注入 router
4. 使用
(1).先注入需要路由的组件
import HelloVue form “./component/HelloVue”
(2).配置路由
const router = new VueRouter({
routes: [
{
path: ‘/’,
component: HelloVue
}
]
})
5. 视图加载的位置 <router-view></router-view>
二。路由跳转
<router-link to="/">Hello Vue</router-link>
三 。路由传递参数

1. 配置路由
   const router = new VueRouter({
   routes: [
   {
   path: ‘/master/:count/:type’,
   name: ‘master’
   component: HelloVue
   }
   ]
   })
2. 在要传值的模块配置跳转要传的值
   例如：<router-link :to="{name: 'master', params:{count:100, type: obj}}">Hello Vue</router-link>
   注意：obj为一个对象 例如：obj: {name: “iwen”, age: 10}
3. 目标文件取值
   {{$route.params.count}}
{{$route.params.type.name}}
   四 。路由高亮效果 注： history.back(); 只会返回上一级
   history.back()
   const router = new VueRouter({
   mode: “history”, // 去掉路由中的#
   linkActiveClass: ‘active’,
   routes: [
   {
   path: ‘/master/:count/:type’,
   name: ‘master’
   component: HelloVue
   }
   ]
   })
4. 在全局样式中设置样式 例如：.active{color: red}