Vue路由传递参数$route$router导航守卫beforeEach

两种方式&＃xff1a;params和query

params的类型

* 配置路由格式&＃xff1a; &＃96;/router/:id&＃96;
* 传递的方式&＃xff1a;在path后面加上对应的值
* 传递后形成的路径&＃xff1a;&＃96; /router/123&＃96;, &＃96;/router/abc&＃96;


1.首先编写User.vue组件
2. App.vue 有一个router-link :to&＃61;"&＃39;/user/&＃39;&＃43;userId"&＃xff0c;界面链接显示
3. router->index.js 配置/user/:id 路由映射方式,这样就根据userid映射成功了
4. 额外功能&＃xff0c;User.vue显示路径id this.$route.params.userId&＃xff0c;节课显示

query的类型

* 配置路由格式&＃xff1a; &＃96;/router&＃96;,也就是普通方式
* 传递的方式&＃xff1a;对象中使用query的key作为传递方式
* 传递后形成的路径: &＃96;/router?id&＃61;123&＃96;, &＃96;/router?id&＃61;abc&＃96;


1.新建profile.vue组件
2.路由配置&＃xff1a; url->Component(关键)
3. 显示的界面&＃xff0c;触发路由的配置

URL&＃xff1a;协议://主机:端口/路径&＃xff1f;查询
scheme://host:port/path?query

profile.vue取出来

<template><div><h2>我是profile组件</h2><h2>name: {{name}}</h2><h2>age: {{age}}</h2><h2>height: {{height}}</h2></div>
</template><script>export default {name: "Profile",data: function () {return{name: this.$route.query.nameage: this.$route.query.age,height: this.$route.query.height}}}
</script><style scoped></style>


也可以用函数来写

v-bind:to&＃61;“对象”
this.$router.push(对象)

$router &＃61; $route &＃43; $route…
$router 和 绑定html的id 和 APP组件渲染界面是统一层级的

会执行VueRouter.install
install执行了什么&＃xff1f;
VueRouter.install &＃61; install install.js

注册了全局组件

Vue.component(&＃39;RouterView&＃39;,View)
Vue.component(&＃39;RouterLink&＃39;,Link)
Vue.prototype.$router &＃61; this._routerRoot._router


所有的组件都继承自Vue类的原型!!!

略…

• 在一个SPA应用中&＃xff0c;如何改变网页的标题呢&＃xff1f;
  • SPA只有一个固定的HTML&＃xff0c;切换不同的组件时&＃xff0c;标签并不会改变
  • 我们可以通过Javascript修改title的内容window.document.title&＃61;‘新标题&＃39;

声明周期函数:
created() 创建vue实例时调用
mounted() 挂载数据时调用
updated() 界面刷新时调用&＃xff0c;

<script>export default {name: "About",created() {document.title &＃61; &＃39;关于title&＃39;}}
</script>


每个Vue都需要添加created() 函数
这样做太繁琐


beforeEach: 前置钩子(守卫)
afterEach: 后置钩子