vue 路由

复习一下vue路由相关知识

main.js文件

import Vue from 'vue'
import App from './App'
import router from './router/index.js'
//全局路由拦截
// router.beforeEach((to, from, next) => {
//   console.log(to)
//   if (to.path == '/c') {
//     alert('你登陆后才能看')
//   }
//   next()
// })
//跳转之后
// router.afterEach((to,from)=>{
//   console.log(to)
//   console.log(from)
//   alert('2')
// })
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [

  {
    path: '/', component: () => import('../components/a.vue'),
    name: '/',
    // meta:{title:'你好'},
    children: [
      {
        path: 'aa', component: () => import('../components/aa.vue')//刚刚不好使，出来了，很神奇
      }
    ]
  },
  { path: '/b/:value', component: () => import('../components/b.vue'), name: 'b', },
  // { path: '/b/:value', component: () => import('../components/b.vue'), name: 'b', },
  // //此处存下了value的值，在后面name和params使用
  {
    path: '/c', component: () => import('../components/c.vue'), name: 'c', beforeEnter: (to, from, next) => {
      alert('222')
      next()
    },
  },
  // 当匹配不到路由的时候，跳转到a
  { path: '*', redirect: '/' }

]
const router = new Router({
  routes,
  mode: "hash"//默认hash，带有#号，代表了像a链接这样本地跳转的形式，相当于锚点
  // mode:'history'
})
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

App.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-link to="/"   tag="div"> 跳转到a</router-link>
    <router-link to="/b" target="_blank">跳转到b</router-link> -->
    <!-- target="_blank" 新打开了一个窗口，或者说跳转了一个新页面-->

    <!-- 用了replace后，当前的跳转不会有历史纪录了 -->
    <!-- 如果说用了replace后，当前的跳转有历史记录，有可能是存在缓存,ctrl alt delete 清除掉缓存 -->
    <router-link to="/" replace> 跳转到a</router-link>
    <router-link to="/b" replace>跳转到b</router-link>
    <router-link to="/c" replace>跳转到c</router-link>
    <router-link :to="{ name: 'c', query: { value: 2 } }" replace
      >跳转到cc</router-link
    >
    <!-- 之前不好使，是因为未在路由对象中定义name属性 -->
    <button @click="push">push</button>
    <button @click="get">取参数</button>
    <!-- 本质上是a标签 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    push() {
      // this.$router.push("/");//跳转的第一种方法
      // this.$router.push({path:"/"})//跳转的第二种方法
      // this.$router.push({ name: "/" }); //跳转的第三种方法
      // this.$router.push({ name: "/" ,replace:true});
      // this.$router.push({ path: "/", query: { value: 2 } });//刷新还是在导航栏能看到的
      // this.$router.push({ name: "b", params: { value: 2 } });
      //如果是path和params对应的话是找不到值的，name和params结合是取不到值的
      // 在路径上设置上path:'/:value',此时已经给b组件设置，不设置path:'/:value'刷新后是没有值de.如果设置了：value刷新之后是有值的，值被存起来了
      //此时导航栏上也是有value值的
      // let routerData=this.$router.resolve({
      //   name:"c"
      // })
      // window.open(routerData.href,"_blank") //打开一个新窗口
      // this.$router.replace("/")
    },
    get() {
      console.log(this.$route);
      // console.log(this.$route.query);
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

a组件

<template>
  <div>a组件
    <router-view></router-view>
    </div>
</template>
<script>


// export default {
// created(){
//     // “区别:router是通过“Vue.use(VueRouter)”和VueRouter构造函数得到一个实例对象,它是一个全局的对象。
//     // 而route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象。”
//     // console.log(this.$router,this.$route)
// }
// }
// </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

b组件

<template>
<div>b组件</div>
</template>
1
2
3

c组件

<template>
  <div>c组件</div>
</template>
<script>
export default {
//   beforeRouteEnter: (to, from, next) => {
//     console.log(to, from);
//     next((val) => {
//       console.log(val);
//     });
//   },
// beforeRouteUpdate(to,from,next){

//     console.log(to)
//     console.log(from)
//     console.log(next)
// next()
// }
// beforeRouteLeave(to,from,next){
//     if(confirm('你确定要离开吗？')){
//         next()
//     }else{
//         next(false)
//     }
// }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27