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 = false

new 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 router

step3 页面中使用路由

......
      <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中的#去除。

二、进阶

2.1、导航守卫

理解：切面编程，拦截器。比如在导航跳转前验证权限和token等。

代码后续补上。

2.2、元信息

理解：路由中带的小数据，了解即可。

2.3、过渡动效

代码后续补上。

2.4、数据获取

代码后续补上。

2.5、滚动

代码后续补上。

2.6、懒加载

代码后续补上。

2.7、导航故障

代码后续补上。