关于vue的安装前面也已经介绍了这里就不介绍了，今天主要介绍路由的设置，下面来一一分析一下
安装路由及配置
-
插件安装 npm install vue-router
在main.js 里面设置import Vuex from 'vuex' Vue.use(Vrouter) 需要实例化router，将router加入到vue的实例中去
-
第三步：在实例化router中设置routers配置选项，mode:”history”:将路由设置成history模式
var router=new Vrouter({ //双花算法 mode:"history",//切换到history模式；默认是hash模式，路由后面会加上一个"#"符号 linkActiveClass:"active", /linkActiveClass：通过配置这个选项来改变点击的样式； routes:[ //地址重定向 { path:"/", redirect:"/cat", // 别名 }, { // path:"/dog/:color",//传参 name:"mydog", path:"/dog", component:Dog, alias:"/dogs", }, { name:"mycat", path:"/cat", component:Cat, alias:"/cats" }, { name:"mysheep", path:"/sheep", component:Sheep, alias:"/sheeps" } ] }) Vue.config.productionTip = false 设置vue-router显示的位置，通过内置组件 <router-view></router-view>
页面里跳转通过<router-link :to=“{path:’apple’}”>跳转到苹果页面</router-link>来进行切换
router-link组件
- 可以直接跳转 设置属性 <router-link to=“‘apple’”>跳转</router-link>
- 可以动态跳转：<router-link :to=“{path:’apple’}”>跳转</router-link>
- 具名的路由 通过tag这个参数；
将标签转换为li <router-link :to=“{path:’apple’}” tag=“li”></router-link>
命名路由：设置的时候可以直接给路由加上name属性;然后在<router-link :to="{name:'applePage'}>跳转</router-link>里直接跳转
