标签：vue demo route props router path id 路由
自定义路由demo，git地址: git@github.com:xsk-walter/Vue-router.git
一、router基本使用
① 创建和路由相关的组件
②Vue.use(vueRouter)注册插件
③创建路由对象，此时配置路由规则
④注册router对象，vue实例时，选项里配置创建好的router对象
⑤通过router-view，设置占位，路径匹配成功后，组件替换掉占位，router-link创建一些链接
二、Hash和History模式的区别
-
表现形式
-
原理：①Hash基于锚点，以及onhashchange事件②History模式是基于HTML5中的History API
- history.pushState()\history.replaceState()
-
history模式需要服务器支持：在服务端应该除了静态资源外都返回单元应用的index.html
三、VueRouter原理
-
Hash模式
#号后的内容作为路径，可以通过location.url改变，如果只是#号后内容改变，不像服务器端发送请求，但会存储到历史记录里，监听hashchange事件，根据当前路由地址找到对应组件重新渲染
-
History模式
- 通过history.pushState()方法改变地址栏，并把当前地址存储到访问历史中，不向服务发送请求，监听popstate事件，可以得到浏览器的变化，pushstate和replacestate不会触发该事件，当点击浏览器前进和后退按钮时触发或者back和forward方法时。
- 当地址改变之后，根据当前地址找到对应组件重新渲染。
四、类图
-
类名 VueRouter
-
属性 options\data\routeMap
-
方法
①Constructor(options):VueRouter ②_install(Vue):void ③init():void => initEvent():void 、createRouteMap(): void 、initComponents(Vue):void
五、Vue的构建版本
- 运行时版本：不支持template模板，需要打包的时候提前编译
- 完整版：包含运行时和编译器，程序运行时把模板转换成render函数
Vue-Router
一、普通、动态路由传参方式
// 路由代码传参
import About from 'about'
// routes 配置
{
path: '/about/:id', // 动态路由
component: About,
props: true // ①布尔模式
}
{
path: '/about', // 普通路由
component: 'About',
props: { id: 19 } // ②对象模式
}
// 接收方式 props
props;['id'] 或者
props: {
id: { type: Number, default: 12}
}
// ③函数模式
routes:[
{
path: '/about',
component: About,
// props: route => ({id:route.query.id}) // url='/about?id="89"' 或者
props: route => ({id: route.params.id}) // url='/about/:id' => '/about/89'
}
]
二、动态路由：将给定匹配模式的路由映射到同一个组件，复用一个组件，相对与销毁后重建更高效。
-
Keep-alive包括时，组件的声明周期钩子函数不会被重复调用。
-
要对同一个组件中参数变化做出响应的话，可以通过watch 侦听$route对象上的任意属性
watch: { $route: { immediate: true, handler(route) { // 处理事件 对路由变化做出响应 } } } -
或者使用导航守卫，beforeRouteUpdate，也可以取消导航
三、捕获所有路由或404路由
四、路由的匹配语法
-
自定义正则 像可以区分 /list/100 和/list/xsk 等路由
- routes: [ { path: '/list/:id(\\d+)'}, {path: '/list/:name'} ]
-
可以重复的参数 匹配多个部分的路由，可以用 * 号和 +号将参数标记为重复
-
也可通过使用?号修饰符（0个或1个）将一个参数标记为可选
五、嵌套路由、命名路由
六、编程式导航
-
声明式（
）\编程式路由 router.push(...) -
Router.push(params):
-
Params: 字符串路径、路径对象、命名的路由并加上参数、带查询参数、带hash
-
'/users/detail' { path: '/users/detail' } { name: 'detail', params: {id: '0'}} { path: '/users/detail', query: {id: '0'} }
-
-
替换当前位置 router.replace({path: '/users'}) 或者router.push({path:'users', replace: true}); 导航时不会向history添加记录
-
history.go()横跨历史
七、命名视图：
八、重定向配置
// 通过routes配置来完成
const routes = [{ path: '/home', redirect: '/'}]
// 重定向的目标也可以是一个命名的路由 redirect: { name: 'Details'}
// 一个方法动态返回重定向目标
const routes = [
{
path: '/home/:id',
redirect: to => {
return {path:'Details', query: { q: to.params.searchText}}
}
}
]
// 别名
alias: '/home'
九、路由组件传参 props、$route.query$route.params
-
布尔模式 routes配置时 props:true设置即可
-
对象模式 props: { id: '0' } 当props为静态的时候很有用
-
函数模式 创建一个返回props的函数，允许你将参数转换为其他类型，将静态值与基于路由的值相结合等操作
props: route => ({ query: route.query.id }) props: route => ({ params: route.params.id}) -
对于命名视图的路由，必须为每个命名视图定义props配置
const routes = [{ path: '/home', components: { default: Home, sidebar: Sidebar}, props: { default: true, sidebar: true} }]
十、不同的历史模式
- Hash模式：history: createWebHashHistory() SEO受影响
- HTML5模式：history：createWbeHistory() 如果没有适当的服务器配置，就会404，需要在服务器上添加一个简单的回退路由
进阶
一、导航守卫：vue-router提供的主要是通过跳转或取消的方式守卫导航。
-
方式：全局、单个路由独享、组件
-
全局前置守卫：beforeEnter:
- 每个守卫都接收两个__参数__：to\from\next(可选)
- 返回值 ①false:取消当前导航、②一个路由地址：通过一个路由地址跳转到不同的地址，类似于router.push()可配置，当前的 导航被中断然后进行一个新的导航。
- next可选参数
-
全局后置守卫：afterEach 不接受next函数也不会改变导航本身
-
全局解析守卫：beforeResolve
-
路由独享守卫：在routes中配置
-
组件内的守卫 可用配置API：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
-
beforeRouteEnter:唯一可传递next回调守卫；解决不可访问this；
-
next（）里的内容执行时机在组件mounted周期之前；
-
beforeRouteUpdate: 该组件复用时被调用
-
标签：vue,demo,route,props,router,path,id,路由 来源： https://www.cnblogs.com/xsk-walter/p/16272624.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。