Vue-router的介绍

1、路由基础介绍

（1）什么是前端路由：

路由是根据不同的URL地址展示不同的内容或页面。

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。之前是通过服务端根据URL的不同返回不同的页面实现的。

（2）什么时候使用前端路由：

在单页面应用，大部分页面结构不变，只改变部分内容的使用。

（3）前端路由有什么优点和缺点：

优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户。

缺点：

1）不利于SEO。

2）使用浏览器的前进和后退健的时候会重新发送请求，没有合理的利用缓存。

3）单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。

(4)基本介绍

vue-router用来构建SPA

<router-link></router-link>或者this.$router.push({path:''})

<router-view></router-view>  组建的渲染

 

2、动态路由的匹配

3、嵌套路由:一级路由里面嵌套子路由

 

4、编程式路由：通过js来实现页面跳转

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})  子页面接收参数为{{ $route.query.goodsId }}

$router.go(1)

5、命名路由和命名视图:命名视图很少用到

给路由定义不同的名字，根据名字进行匹配。

给不同的router-view定义名字，通过名字进行对应组建的渲染。

比如上面途中子路由定义了名字“title”  <router-link v-bind:to="{name:'title',params:{carrtId:123}}"></router-link>

其中params是路由的参数。

<router-view name="title"></router-view>