npm install vue-router

//index.js
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from "../views/Home";
Vue.use(VueRouter)//注冊(cè)路由插件
export default  new VueRouter({
    routes:[{
        path:'/',
        component:Home
    }]
})

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import router from '@/router'//這里就是引入了我們創(chuàng)建好的路由對(duì)象。模塊化的編程思維
Vue.config.productionTip = false
Vue.prototype.bus = new Vue()
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

 {
        path:'/',
        component:Home
        name:home
    }

 <router-link to="/">go to home</router-link>

 <router-link :to="{path:'/'}">go to home</router-link>

 <router-link :to="{name:'home'}">go to home</router-link>

// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢(xún)參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

 {
        path:'/user/:id',
        component:User
        name:user
    }

 <router-link to="/user/01">go to home</router-link>

 <router-link :to="{path:'/user/01'}">go to home</router-link>

 <router-link :to="{name:'/user',params={id:'01'}}">go to home</router-link>

{
  // 會(huì)匹配所有路徑
  path: '*'
}
{
  // 會(huì)匹配以 `/user-` 開(kāi)頭的任意路徑
  path: '/user-*'
}

<router-link to=“/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>

<router-link to=“/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }
}

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

{
        path: '/pageOne',
        component:PageOne,
        alias:"/firstPage",
        name:"pageOne",
        redirect:{name:'pageTwo'}
    },
    {
        path: '/pageTwo',
        component:PageTwo,
        name:'pageTwo'
    }

routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標(biāo)路由 作為參數(shù)
      // return 重定向的 字符串路徑/路徑對(duì)象
    }}
  ]
})

 {
      path: '/user',
      component: User,
      children: [
        {
          // 當(dāng) /user//profile 匹配成功，
          // UserProfile 會(huì)被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當(dāng) /user//posts 匹配成功
          // UserPosts 會(huì)被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: `
    <div class="user">
      <span>User組件</span>
      <router-view></router-view>
    </div>
  `
}

{
        path:"/namingRoute",
        components:{//注意此處components是帶's'結(jié)尾的，之前單個(gè)的時(shí)候是不帶的。
            default:Home,
            one:PageOne,
            two:PageTwo
        }
    }

 	<router-view></router-view>//渲染default對(duì)應(yīng)的組件
    <router-view name="one"></router-view>//渲染one對(duì)應(yīng)的組件
    <router-view name="two"></router-view>//渲染two對(duì)應(yīng)的組件

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

router.beforeResolve((to, from, next) => {
  // ...
})

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

使用的位置：通常在router文件夾下的index.js
const router = new VueRouter({ ... })
//全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  // ...
})
//全局解析守衛(wèi)
router.beforeResolve((to, from, next) => {
  // ...
})
//全局后置鉤子
router.afterEach((to, from) => {
  // ...
})

const User = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  }
}

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過(guò) `vm` 訪(fǎng)問(wèn)組件實(shí)例
  })
}

const User = {
  template: `...`,
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪(fǎng)問(wèn)組件實(shí)例 `this`
  }
}

const User = {
  template: `...`,
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪(fǎng)問(wèn)組件實(shí)例 `this`
  }
}