vue// 步骤1：引入vue.js和vue-router.js库
// 步骤2：创建组件 Vue.component 或简写 {template:HTML代码}
// 步骤3：声明组件路由 new VueRouter
//步骤4：在new Vue里面注册激活路由
// 步骤5：挖坑显示 <router-view />
//path：路径，
// name：标识后期跳转使用
// component：加载组件，
// redirect：路径用来重定向跳转
// alias：别名 就是有两个网址
跳转页面
<router-link to='/' >内容</router-link>
路由就是网址
路由参数就是网址参数
根据路由参数的不同显示不同的内容不同的组件
路由重定向是利用了
new VueRouter({
routes: [
{path,'路由网址 /:穿参的参数名'
name, 名字
component 对应的组件
redirect 跳转到指定网页
, alias 别名
}
....
]
})
多学一招：path里面可以通过*通配my-*
匹配my-开头的路由*
匹配所有路径
- 组件使用（在HTML中）：{{ $route.params.参数名}}
- 组件使用（在 JS中）：this.$route.params.参数名
created 监听第一次路由的变化
beforeRouteUpdate (newData, oldData, next) {
// react to route changes...
// don't forget to call next()
// next() 向下匹配
}
你说下vue路由模式有几种
2种，分别是hash、history （注：mode）
你说下vue路由原理？
是这样的
vue路由是基于单页面应用SPA思想/规则实现的
原理呢
基于BOM的location和history实现的
hash
location.hash = 值
location.onhashchange = 处理函数
history
history.pushState = 值
history.onpopstate = 处理函数
那你说下什么是单页面应用SPA，有点缺点
单页面应用是一个思想/规则，
主要规定页面局部刷新，从而减少HTTP请求 加快页面响应速度，提高用户体验度
有个缺点：不利于SEO优化（注：seo百度能够找到你）
注：这个技术可以解决vue 单页面应用 seo优化问题 nuxt.js
什么是动态路由匹配：监控路由参数变化
应用场景：商品详情页 根据路由参数获取最新数据
语法：从手册复制
镶嵌路由是指父镶嵌子
父挖坑埋子
默认监听范围埋父
视图路由指同级显示多个路由