vue_路由Router

使用路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

安装
1. vue项目创建时选择使用路由，项目将自动在根实例中注册 router 选项，
  该 router 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$router 访问到
2. 假设vue项目创建没有选择使用路由，手动将路由注册到根实例中
  - $ npm install vue-router --save
  - 手动创建目录 src/router/index.js
使用路由(项目初始化选择使用路由后将自动生成下列代码)

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@pages/home/Home'
Vue.use(Router)
export default new Router({
  routes: [{
   path: '/',
   name: 'Home',
   component: Home
  }]
})
// 注册到根实例 // main.js
import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

前端路由优缺点

优点
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点
不利于SEO
使用浏览器前进，后退的时候会从新发送请求，没有合理的利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

动态路由匹配,注意是route不是router

模式	匹配路径	this.$route.params
/goods/:goodsId	/goods/0001
/goods/:goodsId/user/:name	/goods/0001/user/iphone
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件,
我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。

// router/index.js
import User from '@pages/user/User'
routes: [{
  path: '/user/:id',
  name: 'User',
  component: User
}]
// 子组件可以通过this.$route.params.id获取动态id

嵌套路由

// router/index.js
routes: [{ 
  path: '/user/:id', 
  component: User,
  children: [{
    // 当 /user/:id/profile 匹配成功，
    // UserProfile 会被渲染在 User 组件的 <router-view> 中
    path: 'profile', // 注意不要加斜杠/profile，加了斜杠就是根路由
    component: UserProfile
  }, {
    // 当 /user/:id/posts 匹配成功
    // UserPosts 会被渲染在 User 组件的 <router-view> 中
    path: 'posts',
    component: UserPosts
  }]
}]

<router-link to="/user/001/profile">跳转</router-link>

编程式路由

编程路由就是通过js来实现页面的跳转
this.$router.push(params)
this.$router.replace(params)
router.replace唯一的不同就是，它不会向history添加新记录, 替换掉当前的history记录。也就是没有前进后退功能
params: 可以是字符串，对象和参数传递

注意：这里获取使用的是this.$route.query(url地址问号拼接的参数)和获取的动态路由.params(动态参数)不同

params	跳转路径	this.$route.query	this.$route.params
'/home'	/home
	/home
	/home?user=jack
{path: '/home',query:{user:'jack',pass:'1234'}}	/home?user=jack&pass=1234
{name: 'user', params: {userId: '123'}}	/user/123
{path: '/user?count=10', params: { userId: '123' }}	/user?count=10
注意：name是路由配置里面的name的值(命名路由)，如果提供了 path，params 会被忽略，
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
操作 History
router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像,实际上它们确实是效仿 window.history API 的

命名路由

routes: [{
  path:'/user/:userId',
  name: 'user',
  component: User
}]
// 要链接到一个命名路由，可以给router-link的to属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 和编程式路由调用一样router.push({ name: 'user', params: { userId: 123 }})

命名视图

使用场景：有时候想同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="main"></router-view>
// 路由配置
routes: [{
  path: '/',
  components: {
    default: Foo, // 没有给name属性的router-view默认渲染视图
    sidebar, 
    main
  }
}]

vue router-link 渲染a标签的问题 tag属性

vue默认跳转router-link使用a标签渲染，当我们不想使用a标签渲染时，又想使用跳转功能可以使用tag属性，来代替a标签渲染，例如：

<ul>
  // 页面最终会以li标签渲染，
  <router-link tag="li" to="/">列表1</router-link>
</ul>

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

// router 配置
routes: [{
  path: '/user',
  name: 'user',
  component: () => import('./my-async-component')
}]
// 全局组件配置
Vue.component('async-component', () => import('./my-async-component')))
// 局部组件配置
export default {
  // ....
  components: {
    'async-component': () => import('./my-async-component')
  }
}

vue 路由请求转发

vue开发的过程中可能存在一个问题，前端的请求地址的端口与后端是不一致，所以我们在前端的请求并不会被转发到后端上去
这也不是真正的跨域问题，因为当我们发布项目的时候会将前端代码打包放到后端去。这里我们就可以在前端通过配置一个请求转发来解决这样的问题
// config/index.js
proxyTable: {
  '/': {
    target: 'http://localhost:7001', // 假如是egg搭建的后端服务器,egg默认端口7001
    pathRewrite: {
      '/': ''
    }
  }
},
// 这样前端所有请求/开头的请求转发到7001的端口上去，修改配置后，重启项目才会生效


// @vue/cli 配置vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/mock'
        }
      },
      "/goods": {
        target: 'http://localhost:3000'
      }
    }
  }
}