Vue Router 基本使用VueRouter是Vue.js官方路由管理器VueRouter包含的功能有：支持HTML

Vue Router 是 Vue.js 官方路由管理器

Vue Router 包含的功能有：

支持 HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

Vue 路由的基本使用

引入相关的库文件先引入Vue，再引入 Vue Router

import Vue from 'vue'
import VueRouter from 'vue-router'

添加路由连接

  <router-link to="/user">User</router-link>
  <router-link to="/register">Register</router-link>

添加路由填充位

<router-view></router-view>

定义路由组件

  const User = {
    template: '<h1>User 组件</h1>'
  }
  const Register = {
    template: '<h1>Register 组件</h1>'
  }

配置路由规则并创建路由实例

  const router = new VueRouter({
    routes:[
      {path:'/user',component: User},
      {path:'/register',component: Register},
     ]
   })

把路由挂载到根实例中

   const vm = new Vue({
      el: '#app',
      data:{},
      router
    })

路由重定向

 const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user',
          component: User
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

嵌套路由

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      template: '<h1>User 组件</h1>'
    }
    const Register = {
      template: `<div>
      <h1>Register 组件</h1>
      <hr/>
      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>
    <router-view></router-view>
      </div>`
    }

  const Tab1 = {
    template: '<h3>Tab1子组件</h3>'
  }
     const Tab2 = {
    template: '<h3>Tab2子组件</h3>'
  }     
    
    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user',
          component: User
        }, {
          path: '/register',
          component: Register,
          children: [
        {
          path: '/register/tab1',
          component: Tab1
        },
        {
          path: '/register/tab2',
          component: Tab2
        }
      ]
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

关键词：children:[{}]

动态路由

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
       <router-link to="/user/2">User2</router-link>
       <router-link to="/user/3">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      template: '<h1>User 组件--用户id为{{ $route.params.id }}</h1>'
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user/:id', 
          component: User
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

关键词：$route.params.id

路由组件传递参数

通过props

布尔模式

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
       <router-link to="/user/2">User2</router-link>
       <router-link to="/user/3">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id'],  //
      template: '<h1>User 组件--用户id为{{id }}</h1>'
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user/:id',
          component: User,props: true  //
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

对象模式

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
       <router-link to="/user/2">User2</router-link>
       <router-link to="/user/3">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id','uname','age'],  //
      template: '<h1>User 组件--用户信息为:{{id}}{{uname}}{{age}}</h1>'
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user/:id',
          component: User,props:{uname:'zs',age:18}  // id访问不到
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

函数模式

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
       <router-link to="/user/2">User2</router-link>
       <router-link to="/user/3">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id','uname','age'],
      template: '<h1>User 组件--用户信息为:{{id}}{{uname}}{{age}}</h1>'
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        {
          path: '/user/:id',
          component: User,props: (route) =>({uname:'zs',age:18,id:route.params.id})   // 可以访问到id，将动态和静态结合
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

命名路由

通过一个名称来标识一个路由,在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link :to="{ name: 'user', params: { id: 3 }}">User3</router-link>  //
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id','uname','age'],
      template: '<h1>User 组件--用户信息为:{{id}}{{uname}}{{age}}</h1>'
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        { 
          path: '/user/:id',
          name:'user',  // 命名路由
          component: User,props: (route) =>({uname:'zs',age:18,id:route.params.id})
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

编程式导航

this.$router.push('hash地址') // Vue 实例内部，可以通过 $router 访问路由实例。因此可以调用 this.$router.push

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link :to="{ name: 'user', params: { id: 3 }}">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id','uname','age'],
      template: `<div>
        <h1>User 组件--用户信息为:{{id}}{{uname}}{{age}}</h1>
      <button @click="goRegister">跳转到注册页面</button>
    </div>`,
      methods:{
      goRegister(){
      this.$router.push('/register')
      }
     },
    }
    const Register = {
      template: '<h1>Register 组件</h1>'
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        { 
          path: '/user/:id',
          name:'user',
          component: User,props: (route) =>({uname:'zs',age:18,id:route.params.id})
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

this.$router.go(n) // 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.2.1/vue-router.min.js"></script>

</head>

<body>
  <div id="app">
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link :to="{ name: 'user', params: { id: 3 }}">User3</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>
  <script>
    const User = {
      props:['id','uname','age'],
      template: `<div>
        <h1>User 组件--用户信息为:{{id}}{{uname}}{{age}}</h1>
      <button @click="goRegister">跳转到注册页面</button>
    </div>`,
      methods:{
      goRegister(){
      this.$router.push('/register')
      }
     },
    }
    const Register = {
      template: `<div>
       <h1>Register 组件</h1>
     <button @click="goBack">后退</button>
    </div>`,
      methods:{
      goBack(){
      this.$router.go(-1)
       }
      },
    }

    const router = new VueRouter({
      routes: [
         { path: '/', redirect: '/user' },
        { 
          path: '/user/:id',
          name:'user',
          component: User,props: (route) =>({uname:'zs',age:18,id:route.params.id})
        }, {
          path: '/register',
          component: Register
        },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {
      },
      router
    })
  </script>
</body>

</html>

参考：Vue Router官网