VUE路由

今天我们来学习一下VUE路由的相关内容。用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

• SPA单页面应用

1.html不产生跳转，一个APP，网站所有的页面切换显示都在html网页文件里面实现
2.优点：html js css 只会加载一次 速度会提高 / 数据和模板是浏览器端组装的，减少http请求大小，页面速度加载比较快
3.实现：前后端分离，开发工期缩短
4.页面内容大部分是Ajax动态获取并渲染，搜索引擎并不知道页面内容（搜索引擎不友好）

• 页面关系

1.主页面app.vue
1.1 首页 home.vue
1.2 关于 about.vue
2.router.js

• 路由

router-link 路由器切换链接：改变浏览器地址
router-view 存放页面的容器
router.js 配置什么链接对应哪个页面 放在什么容器

• router.js

path 浏览器地址
name 名称
component 组件
简义：什么地址（path）对应在router-view里面放什么组件

• router-link
  当点击的时候把浏览器地址栏改成to里面的内容
• 路由传参
  配置

{path:"/product"}

配置一个id

{path:"/product/:id"}

切换

<router-link to="/product/abc"></router-link>

在product.vue 获取参数

{{$route.params.id}}

• 编程导航

切换页面 router.push("")
历史记录 router.go(-1)

• 路由嵌套

A路由 里面有B路由和C路由

• 链接高亮

router-link-exact-active 路由地址精确匹配
router-link-active 路由匹配

• 路由重定向

{
 path:"",
 redirect:"comment"
}

• 别名

alias:[
 "/main",
 "/home",
 "/index"
]

• 404

{
 path:"*",
 name:'nofind',
 component:Nofind
}

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天