import Router from ‘vue-router' // 引入
Vue.use(Router) // 注冊(cè)
new Router({}）// 創(chuàng)建路由

import Vue from 'vue'
import Router from 'vue-router'
// 引入組件
import helloWord from '../views/HelloWord'
import School from '../views/School'
Vue.use(Router)
// 路由與組件綁定
export default new Router({
    routes: [ {
        name:'school',
        path: '/school',
        component: School
    },{
        name:'hellword',
        path: '/helloWord',
        component: helloWord,
    }]
})

import router from './router'
new Vue({
  el: '#app',
  router, // 引入路由
  render: h => h(App),
  beforeCreate(){
    // 全局事件總線
    Vue.prototype.$bus = this
  }
}).$mount('#app')

<router-link to="/search">跳轉(zhuǎn)到搜索頁(yè)面</router-link>

this.$router.push('/search');

// to path，默認(rèn)類似 $router.push 跳轉(zhuǎn)路由并增加一條路由歷史記錄
<router-link class="link" to="/helloWord">Helloword</router-link>
// to name
<router-link class="link" to="helloword">Helloword</router-link>
// 替換當(dāng)前歷史記錄，跳轉(zhuǎn)到指定路由
<router-link class="link" replace to="helloword">Helloword</router-link>

<button class="link" @click="jump(1)">hellword</button>
jump(type) {
      console.log('type', type)
      if (type == 1) {
        // path 方法跳轉(zhuǎn)
        // this.$router.push('/helloWord')
        // this.$router.push({path:'/helloWord'})
        // name 方法跳轉(zhuǎn)
        this.$router.push({name:'hellword'})
      } else {
        this.$router.push('/school')
      }
}

<button class="link" @click="jump(1)">hellword</button>
jump(type) {
      console.log('type', type)
      if (type == 1) {
         this.$router.replace({name:'hellword'})
      } else {
        this.$router.push('/school')
      }
}

this.$router.go(0) // 刷新
this.$router.go(-1)  // 后退1

<template>
  <div id="app">
    <hr />
    <div class="flex">
      <div class="nav">
        <h1>方式一</h1>
        <router-link class="link" to="/helloWord">Helloword</router-link>
        <router-link class="link" to="/school">school</router-link>
        <h1>方式二</h1>
        <button class="link" @click="jump(1)">hellword</button>
        <button class="link" @click="jump(2)">school</button>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
    jump(type) {
      console.log('type', type)
      if (type == 1) {
        // path 方法跳轉(zhuǎn)
        // this.$router.push('/helloWord')
        // this.$router.push({path:'/helloWord'})
        // name 方法跳轉(zhuǎn)
        // this.$router.push({name:'hellword'})
      } else {
        this.$router.push('/school')
      }
    },
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.flex {
  display: flex;
}
.nav {
  width: 120px;
  display: flex;
  flex-direction: column;
}
.link {
  margin: 3px 10px;
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid blue;
  border-radius: 4px;
}
.content {
  width: calc(100% - 100px);
  height: 800px;
  background-color: #eee;
}
</style>

export default new Router({
    routes: [ {
        name:'school',
        path: '/school',
        component: School,
        children:[{
            name:'student',
            path: 'student',
            component: Student,
        }]
    },{
        name:'helloword',
        path: '/helloWord',
        component: helloWord,
    }]
})

<template>
  <div>
    <h1>我是School</h1>
    <hr>
    <div @click="$router.push('/school/student')">查看學(xué)生</div>
    <router-view></router-view>
  </div>
</template>

this.$router.push({path:'/helloWord',query:{id:'01',name:'張二'}})

{
 name:'helloword',
 path: '/helloWord',
 component: helloWord,
 query:{
     id:'02',
     name:'張三'
  }
}

path: '/helloWord/:id/:name'   // id、name位置對(duì)照

this.$router.push({name:'helloword',params:{id:'01',name:'張二'}})

export default new Router({
    routes: [ {
        name:'school',
        path: '/school',
        component: School,
        children:[{
            name:'student',
            path: 'student',
            component: Student,
        }]
    }]
})

{
   name:'helloword',
   path: '/helloWord',
   component: helloWord,
   props:{id:'003',name:'林淼淼'},
}

<template>
  <div>
    <h1>我是HelloWord</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWord',
  props:['id','name'], // 接收傳參
  mounted(){
    console.log('=====id======',this.id)
    console.log('=====name======',this.name)
  }
}
</script>

{
   name:'helloword',
   path: '/helloWord',
   component: helloWord,
   props:true
}

this.$router.push({name:'helloword',params:{id:'01',name:'張二'}})
<template>
  <div>
    <h1>我是HelloWord</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWord',
  props:['id','name'], // 接收傳參
  mounted(){
    console.log('=====id======',this.id)
    console.log('=====name======',this.name)
  }
}
</script>

{
   name:'helloword',
   path: '/helloWord',
   component: helloWord,
   props($route){
       // $route組件的路由信息
       return {id:$route.query.id,name:$route.query.name}
   },
   query:{
       id:'02',
       name:'張三'
   }
}

<template>
  <div>
    <h1>我是HelloWord</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWord',
  props:['id','name'], // 接收傳參
  mounted(){
    console.log('=====id======',this.id)
    console.log('=====name======',this.name)
  }
}
</script>

Vue.use(Router)
const routes = new Router({
    routes: [ {
        name:'school',
        path: '/school',
        component: School,
        meta:{
            isAuth:true,
            title:'學(xué)校'
        },
        children:[{
            name:'student',
            path: 'student',
            component: Student,
            meta:{
                isAuth:true,
                title:'學(xué)生'
            },
        }]
    },
    {
        name:'helloword',
        path: '/helloWord',
        component: helloWord,
        meta:{
            isAuth:true,
            title:'首頁(yè)'
        },
    }]
})```
**前置路由守衛(wèi) beforeEach**，顧名思義在路由跳轉(zhuǎn)之前執(zhí)行，這里一般可以做頁(yè)面權(quán)限校驗(yàn)等操作
```c
// 前置路由守衛(wèi)
/**
to 目的地
from 起始地
next 放行
**/
routes.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){
        next()
    }
})

// 前置路由守衛(wèi)
/**
to 目的地
from 起始地
next 放行：路由跳轉(zhuǎn)，next下的代碼還會(huì)繼續(xù)的執(zhí)行
**/
routes.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){
        next()
    }else{
        alert('你沒(méi)有權(quán)限')
    }
})

// 后置路由守衛(wèi)
/**
to 目的地
from 起始地
**/
routes.afterEach((to,form)=>{
    document.title = to.meta.title
})

        children:[{
            name:'student',
            path: 'student',
            component: Student,
            meta:{
                isAuth:true,
                title:'學(xué)生'
            },
            // to form 用法同上
            beforeEnter:(to,form,next)=>{
                console.log(to,form);
                next()
            }
        }]

<template>
  <div>
    <h1>我是HelloWord</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWord',
  props:['id','name'],
  data(){
    return{}
  },
  // 進(jìn)入該該組件時(shí)觸發(fā)
  beforeRouteEnter(to,from,next){
    console.log('=====enter-to======',to)
    console.log('=====enter-from======',from)
    next()
  },
  // 離開(kāi)該組件時(shí)觸發(fā)
  beforeRouteLeave(to,from,next){
    console.log('=====leave-to======',to)
    console.log('=====leave-from======',from)
    next()
  }
}
</script>

const routes = new Router({
    // 模式  默認(rèn)為hash
    mode: 'hash',
})

const routes = new Router({
    // 模式
    mode: 'history',
})

// 只緩存組件name為a或者b的組件
<keep-alive include="a,b"> 
  <component />
</keep-alive>
?
// 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>
?
// 如果同時(shí)使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a組件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>
?
// 如果緩存的組件超過(guò)了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

// include 只緩存組件名字為home的組件，其他組件不會(huì)緩存，而exclude恰好相反
<keep-alive include="home">
   <router-view />
</keep-alive>

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true // 需要緩存
      },
      component: Home,
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
            keepAlive: false // 不需要緩存
            }
        }
      ]
    }

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

activated(){
    /** 
     * 緩存的組件點(diǎn)擊時(shí)調(diào)用
    */
},

deactivated(){
    /** 
     * 緩存的組件點(diǎn)擊時(shí)調(diào)用
    */
},