1st. 安装
npm install vue-router
2nd. 引入
可在main.js或者在src中新建router文件夹专门放设置路由的js中引入vue-router：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3rd.创建路由器
// 导入页面组件
import Index from '../pages/Index.vue'
// 创建并导出一个路由器对象
export default new VueRouter({
//定义当前路由器对象管理的路由信息
routes:[{
//路由路径
path:'/',
//路由名称
name:'Index'
//路由组件
component:Index
}]
})
4rd.配置路由器
// 导入当前项目中创建的路由器对象
import router from './router'
new Vue({
render: h => h(App),
// 在Vue的实例上，配置一个路由器对象
router
}).$mount('#app')
5rd.使用路由
5.1 路由组件跳转
<!-- 路由链接，用于跳转路由，to属性设置路由路径 -->
<router-link to="/">首页</router-link>
<!-- 路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，就会在router-view中显示对应的路由组件。-->
<router-view></router-view>
5.2 编程式路由跳转
$router就是当前项目中的路由器对象，它的push方法，用于跳转路由
replace方法，也是用于跳转路由。
push方法是在浏览器的历史记录中，添加一个路由信息
replace方法是在浏览器的历史记录中，替换前一条路由信息
this.$router.push('/order')
6rd. 路由传参
6.1 params 参数 传参
路由配置时需要传一个参数，路由可以传多个参数
props选项为true时，组件可以通过props选项接收路由参数
{
path:'/city/:id',
props:true,
component:City
},
路由跳转时需要将参数写在地址后面
<li @click="$router.push(`/city/${item.id}`)" v-for="(item,index) in citys" :key="index">{{item.name}}</li>
在跳转到的页面中可以获取到传过来的参数
// 使用props选项接收路由参数
props:["id"],
created() {
// $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
// console.log(this.$route);
// console.log(this.$route.params.id);
// 从路由参数中获取城市编号
// let cityId = this.$route.params.id
// 再根据城市编号，获取对应的城市信息
// this.city = this.citys.find(c=>c.id==cityId)
this.city = this.citys.find(c=>c.id==this.id)
},
6.2 query参数 传参
使用query方式传参无需再路由配置中进行操作。
路由地址，采用query传参方式：?参数1=XXX&参数2=XXX....
<li @click="$router.push(`/type?id=${item.id}`)"
v-for="(item,index) in types" :key="index">{{item.name}}</li>
通过$route.query获取路由地址?后面的参数
created() {
// console.log(this.$route.query);
this.type = this.types.find(t=>t.id==this.$route.query.id)
}
6.3 $router和$route
// $router返回的是当前项目中的路由器对象
// $route返回的是当前路由信息
// 判断当前路由信息，不是/news，添加到/news
if(this.$route.path != '/news'){
this.$router.push('/news')
}
