VUE之路由

一.路由的三种模式

(1)history

依赖HTML5 History API和服务器配置

(2)hash

使用URL的hash值来作为路由，支持所有的浏览器

(3)abstract

支持所有的JS运行环境，如果没有发现浏览器的API，则使用这个模式

注意：
hash和history模式可以在vue对象中的model属性配置

二.路由与导航

vue-router提供了两个指令标签来处理导航和渲染的逻辑

<!--
	渲染路径匹配到的视图组件，还可以继续内嵌<router-view>
-->
<router-view>
<!--
	支持用户在具有路由功能的应用中导航
-->
<router-link>

三.路由映射配置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

使用name属性的必要性：
如果没有name，那么在每一个router-link或者router的push方法中都需要在其中编写跳转的url
这样不便于后期的维护
使用name来代表这个url

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

router-link默认渲染成< a >标签的类型
可以使用其中的tag属性来指定输出的元素

<router-link :to = "{ name: 'HelloWorld '}" tag = 'li'></router-link>

四.动态路由

如果在获取图书列表的时候，一次性将图书的详情也获取出来
但是在列表上只展示图书的名称
点击名称才会显示响应的图书详情
这就要求在路由的时候需要将图书的id传入到图书详情页面进行解析
这就是动态路由

首先是图书列表

 <ul>
    <router-link v-for='(book,index) in books' :key='index' :to="{ name: 'bookList',params: {id: book.id}}">{{ book.name }}</router-link>
 </ul>

如上，使用params参数将id传递到路由，然后：

 routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/book/list/:id',
      name: 'bookList',
      component: BookDetail
    }
  ]

在请求的url上使用 :id 的方式来获取params中的参数

在图书详情页面：

export default {
  name: 'BookDetail',
  data () {
    return {
        bookID: this.$route.params.id
    }
  }
}

使用route来获取params中的id

注意

1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等

五.子路由（嵌套路由）

如上图所示：
App.vue中的router-view会链接到main和bookdetial两个页面
而main中的router-view又会链接到下面的四个页面(这四个页面具有相同的底部)
这个时候就要区分渲染的router-view标签了
使用children属性：

、routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: {
        {
          path:'home',
          name: 'home',
          component: Home
        }，
        {
          path:'page',
          name: 'page',
          component: Page
        }
      }
    },{
      path: '/book/list/:id',
      name: 'bookList',
      component: BookDetail
    }
  ]

六.$router对象

$router对象中有三个方法：

push():默认调用此方法

append():将目标URL追加到当前URL下

replace()：以目标URL替换现有的URL

<router-view to="url" append></router-view>