vue-router的基本使用和配置

最新推荐文章于 2024-04-08 16:10:34 发布

忌颓废

最新推荐文章于 2024-04-08 16:10:34 发布

阅读量484

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44947339/article/details/108074616

版权

阅读目录

1、在模块化工程中使用它

(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'

//1.通过Vue.vue(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象，
const routes = [
]

const router = new VueRouter ({
  //配置路由和组件之间的关系
  routes
})

//3. 将router对象传入到vue实例
export default router

2、使用vue-router的步骤:

第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过和

（1)在components文件夹下创建两个组件文件
在这里插入图片描述
Home.vue

<template>
  <div id="app">
      <h2>我是首页</h2>
      <p>我是首页内容，哈哈哈</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

About.vue

<template>
  <div id="app">
      <h2>我是关于内容</h2>
      <p>我是关于内容，哈哈哈</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

（2）配置组件和路径的映射关系
在router/index.js

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//1.通过Vue.vue(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象，
const routes = [
  {
    path:'/home',
    component:Home
  },
  {
    path:'/about',
    component:About
  }
]

const router = new VueRouter ({
  //配置路由和组件之间的关系
  routes
})

//3. 将router对象传入到vue实例
export default router

（3）使用路由

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

（4）运行效果
在这里插入图片描述
点击首页

点击关于

3、路由的默认路径

在index.js里添加

{
  path:'',
  redirect:'/home'
},

在这里插入图片描述

4、HTML5的History模式

在index.js添加mode属性
在这里插入图片描述

5、router-link补充

tag: tag可以指定之后渲染成什么组件, 比如下面的代码会被渲染成一个
元素, 而不是

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在index.js里添加
在这里插入图片描述
在app.vue里的style添加样式

.active{
  color:red;
}

重新运行
在这里插入图片描述

6、路由代码跳转

修改app.vue文件

    <button @click="homeClick">首页</button>
    <button @click="aboutClick">内容</button>

添加按钮的方法

  methods:{
    //通过代码的方式修改路由vue-router
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.push('/about')
    }
  }

在这里插入图片描述

7、动态路由

（1）创建User.vue文件

<template>
  <div id="app">
      <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>

<style>
</style>

（2）在index.js修改

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

（3）修改app.vue文件

<router-link :to="'/user/'+userId">用户</router-link>

添加

data() {
    return {
      userId:'lisi'
    }
  },

（4）运行
在这里插入图片描述

8、路由懒加载

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件

修改index.js文件

// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

const Home = () =>import('../components/Home')
const About = () =>import('../components/About')
const User = () =>import('../components/User')

重新打包则会看到/dist/static/js/文件夹下有6个js文件（一个组件对应两个js文件）

9、认识嵌套路由

嵌套路由是一个很常见的功能

比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.
（1）创建对应的子组件
HomeNews.vue

<template>
  <div id="app">
      <ul>
          <li>新闻1</li>
          <li>新闻2</li>
          <li>新闻3</li>
          <li>新闻4</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeNews'
}
</script>

<style>
</style>

HomeMessage.vue

<template>
  <div id="app">
      <ul>
          <li>消息1</li>
          <li>消息2</li>
          <li>消息3</li>
          <li>消息4</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeMessage'
}
</script>

<style>
</style>

（2）在组件内部使用标签
在Home.vue文件添加

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

（3）运行
需要点击新闻或者消息才会显示列表
在这里插入图片描述
（4）默认嵌套路径
在index.js文件添加

打开浏览器默认就是这个界面

在这里插入图片描述

10、传递参数

params的类型:

配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc

传递参数方式一:
（1）创建Profile.vue文件

<template>
  <div id="app">
      <h2>我是profile组件</h2>
      <h2>{{$route.query.name}}</h2>
      <h2>{{$route.query.age}}</h2>
      <h2>{{$route.query.height}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Profile'
}
</script>

<style>
</style>

（2）在index.js文件配置profile路由信息
在这里插入图片描述
（3）在app.vue文件添加

<router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.88}}">档案</router-link>

（4）效果：
在这里插入图片描述

传递参数方式二: JavaScript代码
（1）修改app.vue文件的用户和档案的代码

<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>

在app.vue文件添加按钮的点击方法

 userClick(){
  this.$router.push('/user/'+this.userId)
},
profileClick(){
  this.$router.push({
    path:'/profile',
    query:{
      name:'kobe',age:19,
      height:1.88
    }
  })
}

效果：
点击用户
在这里插入图片描述

点档案
在这里插入图片描述

11、$ route和$ router是有区别的

$ route和$router是有区别的

$ router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

修改User.vue文件
添加以下内容

<button @click="btnClick">按钮</button>

 methods:{
      btnClick(){
          console.log(this.$router)
          console.log(this.$route)
      }
  }

运行，点击用户按钮，再点击用户界面的按钮，在浏览器的控制台可以看到它们是不一样的
在这里插入图片描述

12、导航守卫使用

我们可以利用beforeEach来完成标题的修改.

首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
其次, 利用导航守卫,修改我们的标题.

导航钩子的三个参数解析:

to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子

（1）在index.js里的如图位置添加（75-80行代码）
在这里插入图片描述
（2）在index.js添加meta属性定义标题

（3）在浏览器可以看到（点击首页标题就是首页，点击用户标题就是用户……）

13、keep-alive遇见vue-router

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
它们有两个非常重要的属性:

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存
（1）在app.vue里修改（把放到里面

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

（2）在home.vue里添加

export default {
  name: 'Home',
  data() {
      return {
          path:'/home/news'
      }
  },
//   created() {
//       console.log('home created')
//   },
//   destroyed() {
//       console.log('home destroyed')
//   },
  activated() {
      this.$router.push(this.path)
  },
  //组件的导航守卫
  beforeRouteLeave (to,from,next){
      console.log(this.$route.path)
      this.path = this.$route.path
      next()
  }
}

（3）测试（在首页里点击消息，在点击关于（其他三个任一个），再点击首页，会发现首页还是会显示消息的列表）
在这里插入图片描述
（4）exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
（如果排除两个组件以上，如Profile,User，中间无空格）

    <keep-alive exckude="Profile,User">
      <router-view/>
    </keep-alive>

忌颓废

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-router的基本使用和配置

阅读目录1、在模块化工程中使用它2、使用vue-router的步骤:3、路由的默认路径4、HTML5的History模式5、router-link补充6、路由代码跳转7、动态路由8、路由懒加载9、认识嵌套路由10、传递参数11、$ route和$ router是有区别的12、导航守卫使用13、keep-alive遇见vue-router1、在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)第一步：导入路由对象，并且调用 Vue.use(VueRouter)第二步
复制链接

扫一扫