本文共 4174 字，大约阅读时间需要 13 分钟。
一、路由基础介绍
转载
1.1 什么是前端路由
- 路由是根据不同的
url地址展示不同的内容或页面 - 前端路由就是把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据
url的不同返回不同的页面实现的
1.2 什么时候使用前端路由
1.3 前端路由优点、缺点
- 优点：
- 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
- 缺点：
- 不利于
SEO - 使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
- 单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的位置
二、vue-router用来构建SPA
2.1 开始
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码
1234 | import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter) |
vue-router其实就是对history的封装- 地址后面跟
#其实就是用了hash
123456789101112131415161718192021 | var routes = [ { path:"/one", component:{template:"#a"} }, { path:"/two", component:{template:"#b"} },];// 定义路由组件var router = new VueRouter({ routes});// 定义路由new Vue({ el:"#box", router});// 创建和挂载实例 |
< router-link > 默认会被渲染成一个 <a> 标签 to=""为我们定义的路由< router-view > 路由匹配到的组件将渲染在这里
- 在
new Router中指定mode为history即可去掉#，这样加载更加逼真符合预期
1234 | new Router({ mode: "history", routes: []}) |
12345678 | //router-link跳转标签 当a标签使用，to必须是一个绝对地址 //或者this.$router.push({path:""})// 组件的渲染 配合router—link使用 |
2.2 动态路由匹配
通过变化的地址去加载信息
| 模式 | 匹配路径 | $route.params |
/user/:username | /user/poetries | {username:"poetries"} |
/user/:username/post/:post_id | /user/poetries/post/123 | {username:"evan",post_id:123} |
- 应用场景
- 商城的详情页，要变换商品的
id，根据商品的id去查对应商品的信息
2.3 嵌套路由
1234567891011121314151617 | new Router({ mode: "history", routes: [ { path:"/goods", name: "GoodsList", component:GoodsList, children: [ // 定义子组件 { path:"title",//最后形式/goods/title name:"title", component:Title } ] } ]}) |
2.4 编程式路由
通过js来实现页面的跳转
1234567891011121314 | // 方式一this.$router.push("name") //name /cart// 方式二 this.$router.push({path:"name"})// 方式三 传递参数this.$router.push({path:"name?a=123"})// 或者this.$router.push({path:"name",query:{a:123}})// 方式四 this.$router.go(1) //$router其实就是对history的封装 |
1 | this.$router.push("/cart?goodsId=123") |
123 | { {$.route.query.goodsId}} |
$route.params是组件跟组件之间路由切换的时候，参数传递
2.5 命名路由
有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
- 给路由定义不同的名字，根据名字进行匹配
- 给不同的
router-view定义名字，通过名字进行对应组件渲染
12345678910 | new Router({ mode: "history", routes: [ { path:"/cart/:cartId", name: "cart", component:GoodsList, } ]}) |
- 根据路由名字跳转。以下是一个命名的路由，而且还带了参数
2.6 命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 ·sidebar·（侧导航） 和main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
- 页面一进来就加载三个
router-view。实现方法
123456789101112131415161718 | new Router({ mode: "history", routes: [ { path:"/", name: "cart", // 根据不同的name值去加载对应的router-view,映射到对应的组件 components:{ default:GoodsList, title:Title, img:Image }, path:"/cart/:cartId", name: "cart", component:Cart } ]}) |
当我们的视图如上时,我们会发现每一个路由被渲染了两次,所以我们需要为视图命名
1234567891011121314151617 | ``` ```javascriptvar Foo = { template: ' ' }var Bar = { template: ' ' }var routes = [ { path:"/one", name:"one", components:{ a:Foo, b:Bar } }, ] |
2.7 重定向和别名
重定向
重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,用于网站调整或网页被移到一个新地址,它也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b
12345 | var router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]}) |
别名
/a 的别名是 /b，意味着，当用户访问/b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问/a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a
12345 | var router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ]}) |