第一步: 安装 sudo npm install vue-router --save
第二步:在src文件夹下新建router文件夹,里面专门用来存放路由相关的内容,(主要是为了代码的结构清晰,避免main.js过于臃肿)
第三步;在main.js文件里引用router
第四步:在components文件夹下创建Cat,Dog俩个组件(用来做路由切换),同时也创建Type1和Type2两个组件,作为Dog的子路由
第五步:在App.vue文件下,在template便签内,引用<router-view></router-view>标签,用来显示路由的组件,<router-link></router-link>标签 用来路由之间的跳转
第六步:配置好 router / index.js
补充:
1. 路由跳转的时候,可以增加css样式
系统默认会在当前的路由加上.router-link-active的类名,可以直接在App.vue文件/style标签里面,设置.router-link- active{backdtound:red},
如果感觉类名太长,也可以自己设置, 方法: 在router/index.js中,routes数组的同级加上linkActiveClass:"active",属性,那么在App.vue里就可以直接用.active
2. 如果jquery和路由冲突,解决方法--------安装jquery
a, 安装jq npm install jquery --save
b, 在main.js中引入 import $ from 'jquery'
c, 在build.webpack.dev.conf.js中,plugings数组中加入
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
重新启动项目 npm run dev
3,编程式路由
<button @click="jumpCat">点击我跳转到猫路由</button>
methods中写上jumpCat方法
jumpCat( ){
this.$router.push({
path:'/cat'
})
}
