vue路由

对于大多数单页面应用，可以使用 vue-router 库中的路由实现。在使用时，要 Vue Router 添加进来，然后将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

基本使用

在使用 vue-router前，需要引入vue.js和vue-router.js

在html中，通过router-link设置连接标签，然后使用router-view作为占位符。

<div id="app">
    <!-- router-link默认渲染成a标签,可以使用tag修改 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register" tag="span">注册</router-link>
    <!-- vue提供的组件，作为占位符使用 -->
    <router-view></router-view>
</div>

在js部分，创建路由的模板对象，通过path设置监听的路由的链接地址，component表示path跑匹配的组件的模板对象

// 创建路由的模板对象
// 引入路由模块之后，在window全局对象中，就有VueRouter
var routerObj = new VueRouter({
// 路由的匹配规则
    routes:[
        //重定向（redirect）-当用户访问 /时，URL 将会被替换成 /login 以达到默认首页的效果
        {path:'/',redirect:'/login'},
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
})

最后，在vue对象中注册本路由

var vm = new Vue({
    el: '#app',
    router:routerObj
})

运行效果如下：

在上图中可以看到，在点击路由时，浏览器地址是保持在同一个页面，即*.html页面，然后再后面加上了#和router-link的地址。
这是因为
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

可以使用history模式时来使URL 就像正常的 url

路由传参

query

父组件中：使用<router-link>标签进行导航
子组件中：使用this.$route.query.对应name来接收路由参数

<router-link :to="{name:'mylogin',query:{id:id,name:name}}">登录</router-link>

也可以使在地址上直接添加参数

<router-link :to="'/login?id=' + id + '&name=' + name">登录</router-link>

路由定义

var router = new VueRouter({
    routes:[
    {path:'/login',component:login,name:'mylogin'}
    ]
})

子组件里调用

this.$route.query.id;
this.$route.query.name

params

父组件中：使用<router-link>标签进行导航
子组件中：使用this.$route.params.对应name来接收路由参数

<router-link :to="{name:'myregister',params:{id:id1,name:name1}}">注册</router-link>

也可以使在地址上直接添加参数

<router-link :to="'/register/'+id1 + '/' + name1">注册</router-link>

注意，和使用query时不同，使用params传参数时，不需要在地址上给出参数名，参数名的指定在路由的定义里

路由定义

var router = new VueRouter({
    routes:[
    {path:'/register/:id/:name',component:register,name:'myregister'}
    ]
})

子组件里调用

this.$route.params.id
this.$route.params.name

query类似于get请求，数据会显示在地址栏，params类似于post请求，不会显示在地址栏

路由的嵌套

借助 vue-router的嵌套路由可以配置路由层的嵌套

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

这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 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
        }
      ]
    }
  ]
})

值得注意的是，当子组件匹配不成功时，父组件也不会输出，为了避免这一情况，可以提供一个 空的 子路由

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

        // ...其他子路由
      ]
    }
  ]
})

效果如图：