Vue2 学习记录--路由
一、基础
1.1、起步
路由相关的文件 main.js、index.js 的相关分析。
main.js：
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')
首先是import，router是官方实现的组件。
其次在new Vue中，和渲染层方法同级别。
再次，为了代码简洁，将路由的实现放到index.js中去实现。
index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},]const router = new VueRouter({routes
})export default router
理解：
1、输出的router，是VueRouter类型的实例，VueRouter是官方管理的。
2、使用时：Vue.use(VueRouter)，然后配置routes 数组。
3、数组元素，path是在url的表现；name是命名路由元素；component 则指明组件物理文件的存储路径。
最后，简单的路由导航实现，三步走起：
step1 创建页面
参考语法部分的创建页面：Vue2 学习记录--语法部分， 代码略。
step2 配置路由
touter目录的index.js中，配置路由数组routes。代码示例：
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/deviceGroup',name: 'deviceGroup ',component: () => import(/* webpackChunkName: "test" */ '../views/DeviceGroupView.vue')},{path: '/test',name: 'test ',component: () => import(/* webpackChunkName: "test" */ '../views/TestView.vue')}
]const router = new VueRouter({routes
})export default routerstep3 页面中使用路由
......<router-link to="/">Home</router-link> |<router-link to="/deviceGroup">设备分组</router-link>|<router-link to="/test">测试页面</router-link>|<router-link to="/about">About</router-link>
......三步走后的输出如下图所示。
1.2、动态路由匹配（url中传子路径参数 更合理）
step1 配置路径
......
path: '/deviceGroup/:deviceGroupId',
......step2 设置参数，比如“009”
......
<router-link to="/deviceGroup/009">设备分组</router-link>|
......step3 获取参数信息
......
<h2>设备类型id：{{ $route.params.deviceGroupId }}</h2>
......1.3、嵌套路由
嵌套路由练习层数过多时遇到了麻烦事情。相同的组件，只能显示其中一个，后来移除嵌套，绝对路由可以显示；然后再放入嵌套，问题没有了。
路由页面（index.js）：
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/deviceGroup',name: 'deviceGroup ',children: [ {path: 'meter/hm/:vid', component: () => import('../views/meter/hm/BxHotMeterView.vue')},{path: 'meter/wm/:vid', component: () => import('../views/meter/wm/BxWaterMeterView.vue')}],component: () => import(/* webpackChunkName: "test" */ '../views/DeviceGroupView.vue')},/* {//全路径能显示path: '/deviceGroup/meter/wm/:vid',name: 'wm',component: () => import('../views/meter/wm/BxWaterMeterView.vue')},{path: '/deviceGroup/meter/hm/:vid',name: 'hm',component: () => import('../views/meter/hm/BxHotMeterView.vue')},*/{path: '/test',name: 'test ',component: () => import(/* webpackChunkName: "test" */ '../views/TestView.vue')}
]const router = new VueRouter({routes
})export default router
路由使用页面：
<template>
<div class="deviceGroup"><h1>设备类型</h1><router-link to="/deviceGroup/meter/hm/BxHotMeter"> BX热量表</router-link> |<router-link to="/deviceGroup/meter/wm/BxWaterMeter">BX水表</router-link> |<router-view/>
</div>
</template>1.4、编程式导航
<template>
<div class="deviceGroup"><h1>设备类型</h1><router-link to="/deviceGroup/meter/hm/BxHotMeter"> BX热量表</router-link> |<router-link to="/deviceGroup/meter/wm/BxWaterMeter">BX水表</router-link> |<router-view/><button @click="$router.push('/test')">跳转到测试页面 push</button><button @click="$router.replace('/test')">跳转到测试页面 replace</button><button @click="$router.push({name:'test', params:{id:'123'}})">跳转到测试页面</button>
</div>
</template>为啥 $router.replace 还是照样能回退？和文档描述有差异呀。
1.5、命名路由
<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/deviceGroup">设备类型</router-link>|<router-link :to="{ name:'test', params:{id:'123'} }">测试页面</router-link>|<router-link to="/about">About</router-link> <router-view/></div>
</template><template>
<div class="test"><h1>测试页面</h1><p>这里是测试内容:{{ $route.params.id }}</p>
</div>
</template>路由设置：
......{path: '/test/:id',name: 'test',component: () => import(/* webpackChunkName: "test" */ '../views/TestView.vue')},
......1.6、命名视图
1.7、重定向和别名
<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/deviceGroup">设备类型</router-link>|<router-link :to="{ name:'test', params:{id:'123'} }">测试页面</router-link>|<router-link to="/about">About</router-link> | <router-link :to="{ name:'baidu' }">baidu</router-link> | <router-link :to="{ name:'redirect_test' }">测试页面: redirect_test</router-link>| <router-link to="/test2">测试页面: test2</router-link>| <router-view/></div>
</template>/*
index.js配置：
......{path: '/test2',name: 'redirect_test',redirect: { name: 'test', params: { id: '999'} }},{path: '/baidu',name: 'baidu',redirect: 'https://www.baidu.com'}......
*/百度是跳转不过去的, url显示为：http://localhost:8080/#/https://www.baidu.com。
1.8、路由组件传参
上述练习的示例中都测试了参数的传递。
1.9、H5 History模式
index.js中：
......
const router = new VueRouter({mode: 'history',//base: process.env.BASE_URL,routes
})
......将url中的#去除。