vue-router (路由) 的详细基本使用

1.vue-router的基本使用

1)导入vue.js和vue-router

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2)定义（路由）组件

const Home = {template: `<h1>主页</h1>`}
const Login = {template: `<h1>登录</h1>`}

3)定义路由（每个路由应该要映射一个组件）

const routes = [
      { path: '/', component: Home },
      { path: '/login', component: Login }
    ]

4)创建 router 实例

const router = new VueRouter({
      routes: routes
    })

5)创建和挂载根实例

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

6) 页面定义跳转路径和路由占位符

<div id="app">
    <router-link to="/">主页</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>

这样一个简单的路由就完成了。

2.动态路由的匹配

1)冒号的方式

2)问号的方式

{ path: '/user/:username', component: {template: `<div><h1>用户:{{ $route.params.username }}</h1><h1>年龄:{{ $route.query.age }}</h1></div>`} }

<router-link to="/user/admin">用户</router-link>

模式	匹配路由	$route.params
/user/:username	/user/admin	{username: admin }

模式	匹配路由	$route.query
/user/:username	/user/admin?age=19	{username: admin, age: 19 }

3.编程式导航

1. router.push(…)
   点击浏览器后退按钮时可以后退，该方法的参数可以是一个字符串路径，或者一个描述地址的对象

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

2. router.replace(…)
   点击浏览器后退按钮时不能后退，该方法的参数和router.push(…) 一样
3. router.go(n)
   该方法的参数是一个整数，表示可以后退多少步

4.路由重定向

比如从 /home 重定向到 /login

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

5.全局前置守卫

控制用户访问权限，当用户获取到一定权限的时候运行访问一些页面，如果没有获取权限则不允许访问。

  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/admin">管理</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
  <script>
    const Home = {template: `<h1>这是首页</h1>`}
    const Admin = {template: `<h1>这是管理页面</h1>`}
    const Login = {template: `<h1>这是登录页面</h1>`}
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home },
        { path: '/admin', component: Admin },
        { path: '/login', component: Login }
      ]
    })
    router.beforeEach((to, from, next) => {
      // to: 到哪里去
      // from: 从哪里来
      // next: 执行的操作
      next(false)
    })
    new Vue({
      el: '#app',
      router
    })
  </script>