vuerouter

发表于 更新于 分类于 阅读次数： 本文字数： 6k 阅读时长 ≈ 5 分钟
vue路由，实现SPA应用

一、安装

npm i vue-router@3

二、基本使用

在 main.js 中

1
2
3
4
5
6
7
8
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
new Vue({
    el:#app,
    render: h=>h(App),
    router
})

创建 router 文件夹并创建 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import VueRouter from 'vue-router'
import About from '../components/About'
export default new VueRouter({
    router:[
        {
            path:'/about',       //路由地址
            component:About     //引入的组件
        },
        {
            path:'',
            component:
        }
    ]
})

router-link 标签：

在原始 html 中，跳转使用 a 标签

1
2
<router-link to="/about">About</router-link>
<!-- to后接路由地址 -->

router-view 标签：

1
2
<router-view></router-view>
<!-- 指定路由的展示位置 -->

  1. 路由组件一般存放在 pages 文件夹中，一般组件在 components 文件夹中

  2. 每个组件都有自身的$route 属性，存储自身的路由信息

  3. 整个项目只有一个 router，存放在$router 中

  4. 切换路由组件会导致组件的销毁与重新挂载

三、嵌套路由

在路由配置中：

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({
  router: [
    {
      name: "about",
      path: "/about",
      component: About,
      children: [
        {
          name: "hello",
          path: "hello", //不用加斜杠
          components: Hello,
        },
        {
          name: "message",
          path: "message", //不用加斜杠
          components: Message,
        },
      ],
    },
  ],
});
1
<router-link to:"/about/hello"></router-link>     <!-- 完整路径 -->

四、路由的 query 参数

1
2
3
4
5
6
7
8
9
10
11
<!-- 字符串写法，可以通过模板字符串实现多个不同路由 -->
<router-link to:"/about/hello?id=10&title=标题"></router-link>
<!-- 对象写法 -->
<router-link :to:"{
    path:'/about/hello',
    query:{
        id:10,
        title:'标题'
    }
}">
</router-link>

取参数：

1
2
$route.query.id;
$route.query.title;

可以对不同的 query 进行不同的解析，实现组件的复用。

若路由中配置的 name 属性，可通过 name 进行跳转

1
2
3
4
5
6
7
8
9
<router-link :to:"{name:'message'}"></router-link>
<router-link :to:"{
    name:'message',
    query:{
        id:10,
        title:'标题'
    }
}">
</router-link>

五、路由的 param 参数

路由设置：

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({
  router: [
    {
      name: "about",
      path: "/about",
      component: About,
      children: [
        {
          name: "hello",
          path: "hello", //不用加斜杠
          components: Hello,
        },
        {
          name: "message",
          path: "message/:id/:title", // :id与:title均为占位符
          components: Message,
        },
      ],
    },
  ],
});
1
2
3
4
5
6
7
8
9
<router-link :to:"`/about/message/10/标题`"></router-link>
<router-link :to:"{
    name:'message',
    params:{
        id:10,
        title:'标题'
    }
}">
</router-link>

使用 params 时，路径必须使用 name，不能使用 path

取值：

1
2
$route.params.id;
$route.params.title;

六、路由的 props 配置

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
export default new VueRouter({
  router: [
    {
      name: "about",
      path: "/about",
      component: About,
      children: [
        {
          name: "hello",
          path: "hello", //不用加斜杠
          components: Hello,
        },
        {
          name: "message",
          path: "message/:id/:title", // :id与:title均为占位符
          components: Message,
          //props:{ //对象写法，对象中所有的key-value都会以props的形式传给Message组件
          //    a:'id',    //传递值为字符串'id'与’title‘
          //    b:'title'
          //}
          //props:true//若为真,则将路由中受到的所有params参数以props的形式传给Message组件,但不能接受query参数
          props($route){  //函数写法
              return{
                  id:$route.query.id,
                  title:$route.query.title
              }
          } //或解构赋值
          props({query:{id:title}}){  //函数写法解构赋值，语义不明，慎重选择
              return{
                  id,
                  title
              }
          }
        },
      ],
    },
  ],
});

在组件中：

1
props: ["id", "title"];

浏览器的历史记录是一个栈

router-link 跳转默认为 push，将上一次的历史记录压入栈

为 router-link 添加 repalce 属性时，会使上次的历史记录被替换为当前地址

开启 replace

1
<router-link replace ....></router-link>

八、编程式路由导航

  1. push 跳转

1
2
3
4
5
6
7
this.$router.push({
  name: "message",
  params: {
    id: 10,
    title: "标题",
  },
});

  1. replace 跳转

1
2
3
4
5
6
7
this.$router.replace({
  name: "message",
  params: {
    id: 10,
    title: "标题",
  },
});

  1. 前进历史记录

1
this.$router.forward();

  1. 后退历史记录

1
this.$router.back();

  1. go 方法

1
2
this.$router.go(3); //前进三次
this.$router.go(-3); //后退三次

九、缓存历史组件

1
2
3
<keep-alive include="Message">
  <router-view></router-view>
</keep-alive>

keep-alive 可以让路由切换后，组件不被销毁。

默认缓存全部在该区域显示的组件，可以用 include 属性选择要缓存的组件，多组件用数组形式。（include 中为组件名）

十、新生命周期钩子

切换路由时，路由组件虽然没有被销毁，但路由组件会失活与激活。

（一）、activated

路由组件被激活时被调用

1
2
activated(){
}

（二）、deactivated

路由组件失活时被调用

1
2
deactivated(){
}

十一、路由守卫

添加路由守卫

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
import VueRouter from 'vue-router'
import About from '../components/About'
const router = new VueRouter({  //不再默认暴露
    router:[
        {
            path:'/about',       //路由地址
            component:About,     //引入的组件
            meta:{Auth:false,title:'关于'}              //meta中可以放置自定义数据
        },
        {
            path:'',
            component:
        }
    ]
})
//全局前置路由守卫，每次路由切换之前
router.beforeEach((to,from,next)=>{  //to指向目标路由，from指示来源，next放行
    //放行逻辑
    if(!to.meta.Auth)       //可以进行身份验证
    {
        next()  //调用next()后，路由才会跳转
    }
})
//全局后置路由守卫，每次路由切换之后
router.afterEach((to,from)=>{
    //处理逻辑
})
export default router

十二、独享路由守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const router = new VueRouter({  //不再默认暴露
    router:[
        {
            path:'/about',       //路由地址
            component:About,     //引入的组件
            meta:{Auth:false,title:'关于'},   //meta中可以放置自定义数据
            beforeEnter:(to,from,next)=>{  //只有前置，没有后置
                //独享路由守卫
            }
        },
        {
            path:'',
            component:
        }
    ]
})

十三、组件内路由守卫

在路由组件内：

1
2
3
4
5
6
beforeRouteEnter(to,from,next){  //通过路由规则，进入该组件时被调用
    //...
}
beforeRouteLeave(to,from,next){  //通过路由规则，离开该组件时被调用
    //...
}

必须通过路由规则进入才能被调用

十四、history 模式与 hash 模式

在路由配置中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const router = new VueRouter({  //不再默认暴露
    mode:'hash',      //默认为hash模式,路径中含有/#/,兼容行较高,history路径中不含#，兼容性稍差
    router:[
        {
            path:'/about',       //路由地址
            component:About,     //引入的组件
            meta:{Auth:false,title:'关于'},   //meta中可以放置自定义数据
            beforeEnter:(to,from,next)=>{  //只有前置，没有后置
                //独享路由守卫
            }
        },
        {
            path:'',
            component:
        }
    ]
})

十五、编译 vue 项目为标准前端文件

执行npm run build。

文件夹下生成 dist 文件夹，其中含有一个.html 文件以及.css .js 等。

解决 express 服务器 history 模式下刷新出现 404 的问题：

安装npm i connect-history-api-fallback

1
2
const history = require("connect-history-api-fallback");
app.use(history);