App.vue下的

在按钮的方法里激活，跳转到router.js里面所写的组件。（path、name、component）

  1. this.$router.push("/foo")

关于弹出消息：

  1. this.$message.success()

关于：

可以使组件实例在它们第一次被创建的时候就缓存下来。之后再跳转页面不会再进行生命周期。

  1. <div>
  2.     <keep-alive>
  3.         <router-view></router-view>
  4.     </keep-alive>
  5. </div>

在index.js里const routes 和const router。

动态路由匹配

对地址栏做出改变，界面做出同步改变

“动态” 就是用冒号:进行绑定。

  1. {
  2.     path: '/foo/:name',
  3.     component: test,
  4. }

上面的:name并不代表可以随意取，需要在一些组件里指明内容。比如下面的内容：

  1. <template>
  2.     <Tabs v-model="name" @on-click='li(name)'>
  3.     <!--v-model绑定了value，这里的值决定了下面哪个标签会被激活-->
  4.         <TabPane label="1" name="name1">
  5.             <contentBar1></contentBar1>
  6.         </TabPane>
  7.         <TabPane label="2" name="name2">
  8.             <contentBar1></contentBar1>
  9.         </TabPane>
  10.         <TabPane label="3" name="name3">
  11.             <contentBar1></contentBar1>
  12.         </TabPane>
  13.     </Tabs>
  14. </template>

编程式导航

对界面进行点击，传递到地址栏里去

点击产生事件，事件发生了去跳转。

在 Vue 实例内部可以通过 $router 访问路由实例。因此我们可以调用 this.$router.push。

  • 声明式：<router-link :to="..."
  • 编程式：router.push(...)
  1. methods: {
  2.     l1(name)
  3.     {
  4.         this.$router.push("/foo"+name)
  5.     }
  6. }

如果提供了push，那么params将会被忽略：

  1. const userId = '123'
  2. router.push('home') // → /home 字符串
  3. router.push({ name: 'user', params: { userId }})  // 对象 → /user/123
  4. router.push({ path: `/user/${userId}` })  // → /user/123
  5. router.push({ path: '/user', params: { userId }}) // → /user  params不生效
  7. // 若带查询参数query，则变成 /register?plan=private
  8. router.push({ path: 'register', query: { plan: 'private' }})

注意，如果目的地和当前路由相同，只有参数发生了改变 (比如从 /users/1 -> /users/2)，则需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

组件复用

每次使用组件时不要再去生命周期里跑一趟了，对组件进行监听。

  1. watch: {
  2.     $route(to, from) {
  3.         // 对路由变化进行响应
  4.         this.name = this.$route.params.name;
  5.     }
  6. }

使用生命周期的话，就会重新刷新一遍页面了。

嵌套路由

下面多了一个children属性。children是一个对象数组（中括号里带大括号）。

路由重定向

加入了redirect，输入空的时候自动定向到所需要的网站

  1. {
  2.     path: '*',
  3.     name: 'any',
  4.     redirect: '/login'
  5. }

路由参数传递

:id是一种传递方式。另一种是props给出对象，里面放函数等等。（父传子）

全局路由守卫

不能不登录就进入主页面。【全局前置守卫】

  1. const router = new Router({
  2.     router.beforeEach((to, from, next) => {
  3.         if (to.path == '/index'){
  4.             if (auth.islogin()){
  5.                 next()
  6.                 } else {
  7.                 next('/login')
  8.             }
  9.         } else{
  10.             next()
  11.         }
  12.     })
  13. })

局部路由守卫

组件内的局部守卫放在某个组件里面。

  1. beforeRouteEnter (to, from, next){
  2.     // 不能获取组件实例`this`，因为守卫执行前组件实例还没被创建
  3.     if (true){
  4.         next()
  5.     };
  6. },
  7. mounted(){
  8.     // 在mounted()里写表示组件创建完毕后
  9. }

数据获取

  • 导航完成之后获取，即先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
  • 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

导航完成后获取

马上导航和渲染组件，然后在组件的 created() 钩子中获取数据。在数据获取期间展示一个 loading 状态。

而一旦路由发生变化，则在watch中再一次执行方法。

  1. <template>
  2.   <div class="post">
  3.     <div v-if="loading" class="loading">
  4.       Loading...
  5.     </div>
  7.     <div v-if="post" class="content">
  8.       <h2>{{ post.title }}</h2>
  9.       <p>{{ post.body }}</p>
  10.       <p>已加载数据</p>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   data () {
  18.     return {
  19.       loading: false,
  20.       post: null,
  21.     }
  22.   },
  23.   created () {
  24.     // 组件创建完后获取数据，
  25.     // 此时 data 已经被 observed 了
  26.     this.fetchData()
  27.   },
  28.   watch: {
  29.     // 如果路由有变化，会再次执行该方法
  30.     '$route': 'fetchData'
  31.   },
  32.   methods: {
  33.     fetchData () {
  34.       setTimeout(() => {
  35.         this.loading = false;
  36.         this.post = true;
  37.       }, 2000);
  38.     }
  39.   }
  40. }
  41. </script>