前端

Vue 笔记 5 - vue路由

Vue 笔记 5 - vue路由

安装：

1
npm i vue-router

使用router-link标签实现路由的切换

1
2
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>

使用router-view指定组件的呈现位置

1
<router-view></router-view>

几个注意点：

  1. 路由组件通常存放在pages文件夹，以班组间通常存放在component文件夹
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

嵌套（多级）路由

  1. 配置路由规则，使用children配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
            }
            ]
        },
    ]
})
  1. 跳转（要写完整路径）
1
<router-link to="/home/news">News</router-link>

路由传递参数

  1. 配置路由，声明接收params参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
         path: '/home',
         component: Home,
         children: [{
             path: 'news',
             component: News,
         },
         {
             path: 'message',
             component: Message,
             children: [{
                 name:'xq',
                 // path: 'detail',  // query路由
                 path: 'detail/:id/:title',  // params路由
                 component: Detail,
             }]
         }
         ]
    }

  2. 传递参数
    跳转路由并携带query参数，to的字符串写法

    1
    <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

    跳转路由并携带params参数

    1
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

    跳转路由并携带query参数，to的对象写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <router-link :to="{
        // path:'/home/message/detail',
        // 使用命名路由
        name:'xq',
        query: {
            id:m.id,
            title:m.title
        }
    }">
        {{m.title}}
    </router-link>

    跳转路由并携带params参数，to的对象写法，这里需要注意的是params路由不能使用path，必须使用name方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <router-link :to="{
        // path:'/home/message/detail',     // error！
        // 使用命名路由
        name:'xq',
        params: {
            id:m.id,
            title:m.title
        }
    }">
        {{m.title}}
    </router-link>

路由的props配置

作用： 让路由组件更方便的收到参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    name: 'xq',
    path: 'detail/:id',
    component: Detail,

    // props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传递给Detail组件。
    // props: {a:1, b:'Hello'},

    // props的第二种写法，值为bool值，若为真，就会把该路由组件收到的所用params参数，以props的形式传递给Detail组件。
    // props: true

    // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件。
    // props($route){
    //     return {id:$route.params.id, title: $route.params.title}
    // }

    // 这里可以使用解构赋值的连续写法简化
    props({params:{id, title}}){
        return {id, title}
    }
}

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
具体编码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
methods: {
  pushShow(m) {
    this.$router.push({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
  replaceShow(m) {
    this.$router.replace({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
},

缓存路由组件

  • 作用：让不展示的路由组件保持挂载，不被销毁

  • 具体编码：

    • 缓存一个路由组件
    1
    2
    3
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
    • 缓存多个路由组件
    1
    2
    3
    <keep-alive :include="['News','Message']">
      <router-view></router-view>
    </keep-alive>

路由守卫

作用： 对路由进行权限控制
分类： 全局守卫、独享守卫、组件内守卫
全局守卫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 全局前置路由守卫 -- 初始化及每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // console.log(to, from, next)
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'geekhall'){
            // 放行
            next()
        } else {
            alert('请先登录')
        }
    }
})

// 全局后置路由守卫 -- 初始化及每次路由切换之后被调用
// 使用的不多，可以用于切换页面title
router.afterEach((to, from) => {
    console.log('后置路由守卫：', to , from)
    document.title = to.meta.title || "geekhall"
})

独享路由守卫:beforeEnter

路由器的两种工作模式

  1. 对于一个url来说，什么事hash值？ —-#及其后面的内容就是hash值。
  2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
  3. hash模式：
    • 地址中永远带着#，不美观
    • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
    • 兼容性较好
  4. history模式：
    • 地址干净美观
    • 兼容性和hash相比略差
    • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。