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

传递参数

两种方式：params和query

params的类型

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

---

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

---

query的类型

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

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

URL：协议://主机:端口/路径？查询
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.name
        age: this.$route.query.age,
        height: this.$route.query.height
      }
    }
  }
</script>

<style scoped></style>

也可以用函数来写

v-bind:to=“对象”
this.$router.push(对象)

$route与$router

$router = $route + $route…
$router 和 绑定html的id 和 APP组件渲染界面是统一层级的

Vue.use(VueRouter)

会执行VueRouter.install
install执行了什么？
VueRouter.install = install install.js

注册了全局组件

Vue.component('RouterView',View)
Vue.component('RouterLink',Link)
Vue.prototype.$router = this._routerRoot._router

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

略…

为什么要使用导航守卫？

• 在一个SPA应用中，如何改变网页的标题呢？
  • SPA只有一个固定的HTML，切换不同的组件时，标签并不会改变
  • 我们可以通过JavaScript修改title的内容window.document.title=‘新标题'

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

<script>
  export default {
    name: "About",
    created() {
      document.title = '关于title'
    }
  }
</script>

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


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