有勇气的牛排博客
☰

vue路由vue-router

有勇气的牛排 1308 前端 2021-11-23 00:51:30

1 安装

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

  1. 导入路由对象，并且调用Vue.use(VueRouter)

  2. 创建路由实例，并且传入路由映射配置

  3. 在Vue实例中挂载创建的路由实例

2 使用vue-router的步骤

  1. 创建路由组件

  2. 配置路由映射：组件和路径映射的关系

  3. 使用路由：通过<router-link>和<router-view>

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签

<router-view>：该标签会根据当前路径，渲染出不同的组件

网页中其他的内容，比如顶部的标题/导航，或者底部的一些版权信息会和<router-view>出于同一个等级

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

3 history模式

index.js的export中添加

mode: 'history'

4 router-link补充

tag属性：渲染为指定元素

<router-link to="/home" tag="button">首页</router-link>

replace属性：该属性不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

<router-link to="/home" tag="button" replace>首页</router-link>

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

  • 在进行高亮显示的导航菜单挥着底部tabbar时，会使用到该类

  • 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

router-link-active属性修改为active

<router-link to="/home" tag="button" replace active-class="active">首页</router-link>

5 代码跳转路由

<button @click="homeClick">首页</button>

methods: {
  homeClick() {
    // 通过代码的范式修改路径 vue-router
    this.$router.push('/home')
    console.log('homeClick');
  }
}

6 动态路由

{
  path: '/user/:userId',
  name: 'User',
  component: User
}

子路由获取参数

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>用户信息</p>
    <h2>{{ userId }}</h2>
    <h2>{{ $route.params.userId }}</h2>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed: {
      userId() {
        return this.$route.params.userId
      }
    }
  }

</script>

7 路由的懒加载

  • 当导包构建应用时，javascript包会变得非常大，影响页面加载

  • 如果我们能把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候才能加载对应的组件，这样就更高效了

路由懒加载做了什么

  • 主要所用是将路由的对应组件打包成一个个的js代码块

  • 只有在这个路由被访问到的时候，才加载对应的组件

index.js

方式一：

const Home = resolve => {
  require.ensurre(['../components/Home.vue'],()=>{
    resolve(require('../components/Home.vue'))
  })
}

方式二：AMD写法

const About = resolve => require(['../compontents/About.vue'], resolve);

方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

// 懒加载方法导入(一个懒加载对应一个js文件)
const Home = () => import('../components/Home')

8 嵌套路由

Home.vue

<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>

<router-view></router-view>

index.js

{
  path: '/home',
  name: 'Home',
  component: Home,
  children: [
    {
      path: '',
      redirect: '/news'
    },
    {
      path: 'news',
      component: HomeNews
    },
    {
      path: 'message',
      component: HomeMessage
    },
  ]
},

9 传递参数

  • params类型：/route/:id

  • query：类型 /router?id=123

button和router-link方法二选一

http://localhost:8080/profile?id=1&name=charles

# router-link
<router-link :to="{ path: '/profile',query:{id:'1',name:'charles'}}">个人资料</router-link>

# button
<button @click="userClick">用户</button>
<button @click="profileClick">个人资料</button>
<router-view></router-view>

userClick() {
  this.$router.push('/user/' + this.userId)
},
profileClick() {
  this.$router.push({
    path: '/profile',
    query: {
      id: 2,
      name: 'tom'
    }
  })
}

profile.vue

<h2>{{ $route.query.id }}</h2>
 <h2>{{ $route.query.name }}</h2>

10 导航守卫

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})
// 后置钩子(hook)
router.afterEach((to,from)=>{
  
})

index.js

{
  path: '/about',
  name: 'About',
  meta: {
    title: '关于'
  },
  component: About
},

About.vue

<script>
  export default {
    name: "Home",
    created() {  // 创建组件
      console.log('created');
      // document.title = '首页'
      document.title = to.matched[0].meta.title
    },
    // mounted() {  // 挂载到dom
    //   console.log('mounted');
    // },
    // updated() { // 界面发生刷新
    //   console.log('updated');
    // }
  }
</script>

11 keep-alive遇见vue-router

  • keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

（1）include：字符串或正则表达式，只有匹配的组件会被缓存

（2）exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

  • router-view：也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存
// 这两个函数，只有该组件被保持了装填使用keep-alive时，才是有效的
activated() {
  this.$router.push(this.path)
},
beforeRouteLeave(to, from, next) {
  this.path = this.$route.path;
  next()
}

<keep-alive>
  <router-view/>
</keep-alive>

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流