vue+express+mongo之踩坑--Vue-Router

项目中用到了vue-router，那么就简单总结一下vue-router的使用。

1.vue-router安装

npm install vue-router --save //也可以通过cnpm安装

通过vue-cli搭建的框架可以看到在router文件夹中的index.js文件有如下：

import Router from 'vue-router'
Vue.use(Router); //如果使用全局的 script 标签，则无须如此（手动安装）。

2. 开始

当把vue-router引入项目中，我们要弄清楚的有两点。
第一，将组件映射到对应的路由。
第二，组件在哪里渲染。
如下第一个例子：

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

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

如上，通过router-link组件进行导航，其中的to属性指定跳转的路由，router-link会被渲染为一个a标签。

如果是模块化编程，首先要导入vue和vue-router，然后Vue.use(vueRouter)。

import Vue from 'vue'
import Router from 'vue-router'

//这两个是路由组件，通过import进来
import Index from '@/components/index/Index';
import BlogPage from '@/components/blog/BlogPage';

Vue.use(Router);

export default new Router({
  routes: 
    [
      {path: '/index', name: 'IndexPage', component: Index},//可以看到每个路由对应一个组件
      {path: '/blog', name: 'BlogPage', component: BlogPage}
    ]
})；

//以上创建了路由实例并且通过export暴露出来。然后创建和挂载根实例，这样整个应用都具有路由功能。
const app = new Vue({
  router
}).$mount('#app')

3. 动态路由匹配

在某些情况下我们需要某种模式匹配的路由都映射到同一个组件。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

如上的动态路径，可以匹配/user/1, /user/2, user/foo，等一系列这种模式的路由。
当匹配到某一个路由的时候，会将这些参数存到this.$router.params中。如上匹配的路由参数，我们可以通过this.$router.params.id进行获取。

注意：使用路由参数时，如上面的从/user/1跳转到/user/2，原来的组件是会被复用的，因为两个路由都映射的是同一个组件，这样的设计是具有一定的高效性的。不过关于组件的生命周期的一些钩子函数都无法使用了。
我们可以通过watch进行检测一些路由参数的变化。

4. 嵌套路由

当一个被渲染的组件中可以包含自己的<router-view>。当一个被渲染的组件要渲染自己的子组件，那么需要在路由配置中加上children的配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

注意：以/开头的路径会被当做根路径, 所以如果在children中的子路由前面加上/就会在地址栏中显示的是从跟路由显示的路径

5.编程式导航

通过使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

• router.push(location)
  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
  当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> （声明式 ）等同于调用 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' }})

• router.replace(location)
  跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

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

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

6.命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

7.重定向 和 别名

• 重定向
  重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /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 => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

• 别名
  『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？
  /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
  上面对应的路由配置为：

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

关于vue-router简单的使用就介绍到此了，详细的教程可以去看：
https://router.vuejs.org/zh-cn/essentials/getting-started.html