Vue Router

安装：npm install vue-router -S
配置：
1.在router文件夹下创建一个router.js
2.router.js下

• import Vue from ‘vue’
• import VueRouter from ‘vue-router’
• Vue.use(VueRouter) 安装|注册到全局
• const router = new VueRouter({mode: ‘history’,routes})
• export default router

3.在main.js中引入router.js
使用：
1.使用路由 (去哪)

• < router-link to="/home">首页< /router-link>
• < router-view>展示区< /router-view>

• router-link 组件属性
  to="/home"
  tag='li' 指定编译后的标签
  active-class='类名' 指定激活后的样式
  

2.配置路由(建立组件和请求的对应关系) 数组

• [{path:’/home’,component:home},{}]

• path 路径
  component: 指向的组件变量名
  

3.创建路由(传递配置)

• router = new VueRouter(配置)
  配置: {routes:数组}

4.顶层|根组件，注册路由 （路由控制页面组件的加载）

• 选项
  router(选项):router (router对象)
• 子路由：children
  routes=[{},{path:xx,component:xx,children:[ 子路由 {}… ]},{}]

5.动态路由配置

 {path:'xx/:参数变量',component:xx}
 {path:'/', redirect:'/home'},	//这个是在后面接上/时能直接跳转到home页面

6.传递/接收参数 和 数据

 router-link to='xx/参数?a=1&b=2'
 router-link :to='{name:'xx',params:{id:1},query:{a:2,b:3}}'

 接收参数和数据
   模板:	{{$route.params|query|path}} 
   组件: this.$route.xxx

7.路由跳转

• 声明式：< router-link :to="…">

•   编程式：
      this.$router.push({name:'...'})   添加一个路由 （记录到历史记录)
      this.$router.replace({name:'...'})   替换一个路由 （不记录到历史记录)
      this.$router.go(-1|1)|goBack()  回退/前进  history.go|goBack
  

8.路由模式
mode: hash默认带# | history

new VueRouter({mode:xx})

9.路由守卫

• 全局守卫

•    beforeEach((to, from, next) => {
       // ...
     })
     router.afterEach((to, from) => {
       // ...
     })
  

• 路由独享的守卫

•    beforeEnter: (to, from, next) => {
     	// ...
     }
  

• 组件内的守卫

•   beforeRouteEnter(to,from,next){}	前置守卫,进入
       to 目标路由
       from 当前路由
       next 是个函数  next() == next(true)  运行跳转
               next(false) 不让跳转
               next('字符路径')/next({对象路径}) 重定向
  
     beforeRouteLeave(to,from,next){}  后置守卫,离开
     beforeRouteUpdate (to, from, next) {
       // ...
     }
  

• 路由数据预载:

•  beforeRouteEnter(to,from,next){
     1. 数据附加到目标路由上 to.query.数据名=值
     2. next( _this => _this.属性="拿到的数据")   √
   }
  

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import My from '../views/My.vue'
import Detail from '../views/Detail.vue'
import Message from '../views/Message.vue'
import Goods from '../views/Goods.vue'
import Login from '../views/Login.vue'
import Error from '../views/Error.vue'

Vue.use(VueRouter)

  const routes = [
  {path: '/home',name: 'Home',component: Home},
  {path: '/',redirect:'/home'}, //这个是在后面接上/时能直接跳转到home页面
  {path: '/message',name: 'Message',component:Message},
  {path: '/my',name: 'My',component: My},
  {path: '/login',name: 'Login',component: Login},
  
  {path: '/goods',name: 'Goods',component:Goods,
  children:[{name:'detail',path:'/detail/:id',component:Detail}]
  },
  {path: '*',name: 'Error',component: Error},

  ]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home" active-class='bckg'>Home</router-link> |
      <router-link to="/message" active-class='bckg'>Message</router-link> |
      <router-link to="/my" active-class='bckg'>My</router-link> |
      <router-link to="/login" active-class='bckg'>Login</router-link> |
      <router-link to="/goods" active-class='bckg' tag='li'>Goods</router-link>  
    </div>
    <router-view/>
  </div>
</template>

<style>
.bckg{background:#f0f}
</style>

Goods.vue

<template>
  <div class="goods">
    <h1>This is an goods page</h1>
    <router-link to="/goods/1">商品001</router-link>
    <router-link to="/goods/2?a=1&b=2">商品002</router-link>
    <!-- <router-link to="/goods/a/b/c/d/e/f/3?a=1&b=2">商品003</router-link> -->
    <router-link :to="{name:'detail',params:{id:3},query:{a:11,b:22}}">商品003</router-link>

    <router-view>子展示区</router-view>
  </div>
</template>

Detail.vue

<template>
  <div class="detail">
    <h1>This is an detail page</h1>

    {{this.$route.params}}/{{this.$route.query}}
  </div>
</template>