【学Vue就跟玩一样】Vue中的路由与多种守卫(vue要怎么学)

【学Vue就跟玩一样】Vue中的路由与多种守卫 1.vue-router

推荐整理分享【学Vue就跟玩一样】Vue中的路由与多种守卫(vue要怎么学)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue要怎么学,vue学的快吗,vue学的快吗,vue学起来困难吗,vue学起来困难吗,vue学完,学vue用什么软件,vue学完,内容如对您有帮助，希望把文章链接给更多的朋友！

vue的一个插件库，专门用来实现对SPA应用的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面，只会做页面的局部更新。数据需要通过ajax请求获取。

2.什么是路由

一个路由就是一组映射关系(key ：value)

key 为路径, value可能是function或componente

路由分类

1.后端路由:value 杲function,用于处理客户端提交的请求。工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。

2.前端路由: value是component,用于展示页面内容。工作过程: 当浏览器的路径改变时,对应的组件就会显示。

3.路由的基本使用

1.安装vue-router

npm i vue-router

2.应用插件

Vue.use(VueRouter)

3.router配置项

// 引入vueRouterimportvueRouterfrom'vue-router'// 引入组件importAboutfrom'../components/About'importHomefrom'../components/Home'export default new vueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home},]

})

4.使用router-link实现切换（注：router-link经过浏览器后就会变成a标签哦）

<divclass="list-group"><!-- 原始写法——使用a标签进行页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a>--><!-- 使用vue-Router提供的标签进行路径的修改,实现路由的切换 --><router-link            class="list-group-item"            active-class="active"            to="/about">About           </router-link><router-link            class="list-group-item"            active-class="active"            to="/home">Home           </router-link></div>

5.使用router-view实现组件的呈现（类似于插槽）

<divclass="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div>

注：1.路由组件通常存放在pages文件夹，所以不要往components文件夹里面放了2.通过切换，“隐藏” 了的路由组件，默认是被销毁掉的，需要的时候再去挂载3.每个组件都有自己的$route属性，里面存储着自己的路由信息。4.整个应用只有一个router, 可以通过组件的$router属性获取到。

4.多级路由

在配置路由规则的以及路由里面进行配置下一级路由使用children:[ { } ]这种形式

routes: [{path: '/about',component: About},{path: '/home',component: Home,children: [{path: 'news',component: News},{path: 'message',component: Message}]},]5.路由传参

有两种方式，第一种就是直接再路径里面写query参数，第二种就是params传参

路由命名（简化代码）

再to的时候就不用写一大堆路径了

1.params

1. 配置路由