前端路由之Vue-router

今天为大家介绍的是Vue-router，下面先讲一讲路由基础。

路由是根据不同的url地址展示不同的内容或页面，那什么是前端路由呢？前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的。路由的应用场景是：在单页面应用中，大部分页面结构不变，只改变部分内容的使用。

前端路由优点是用户体验好，不需要每次都从服务器全部获取，可以快速把页面展现给用户；其缺点是 (1) 不利于SEO (2) 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 (3) 单页面无法记住之前滚动的位置，即无法在前进、后退的时候记住滚动的位置。

接下来我们开始讲Vue-router，它其实是对history的封装【比如history.go(1)代表前进，history.go(-1)代表后退】。前端路由中默认有符号#是因为路由的哈希，在index.js中修改mode:'history'就可以去掉符号#。下面让我们来了解下动态路由及其配置、嵌套路由、编程式路由、命名路由及命名视图吧^_^

什么是动态路由?

路径	匹配路径	$route.params
/user/:username	/user/lili	{username:'lili'}
/user/:username/post/:id	/user/lili/post/12	{username:'lili',id:12}

嵌套路由是路由嵌套路由，它可以实现同一页面不同菜单的切换

注意：App.vue里面的<router-view></router-view>是专门用来装载一级路由的，所以如果一个路由里面有子路由，那么那个路由里面就要加一个<router-view></router-view>作为载体来进行渲染

编程式路由即通过js来实现页面的跳转，有如下几种函数：

$router.push("/cart")
$router.push({path:"/cart"})
$router.push({path:"/cart?id=12"})或者$router.push({path:"/cart",query:{id=12}})
$router.go(-2)

注意：$router是定义我们的路由，而$route是获取单个路由里的参数；$route.params是组件与组件之间路由切换的时候参数的传递，$route.query是页面之间切换的传递，一个是动态路由，一个是页面之间的传递（直接通过?的方式拼接），两者之间是不一样的

命名路由和命名视图

命名路由是给路由定义不同的名字，根据名字进行匹配。命名视图是给不同的router-view定义名字，通过名字进行组件的渲染（比较少用到）。

命名视图：

前端路由之Vue-router

猜你喜欢