路由：Vue-Router

已于 2022-04-29 19:51:02 修改
阅读量1.1k 收藏 1
点赞数 3
分类专栏： Vue学习 文章标签： vue.js javascript
于 2022-04-28 20:19:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A____t/article/details/124444438
版权

什么是路由？

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。

网页的发展阶段

后端路由阶段：

由后端处理URL和页面之间的映射关系，前端展示的页面都是经由后端处理好的。

前后端分离阶段：

随着Ajax技术的出现，有了前后端分离的开发模式，后端只负责提供数据，不负责任何阶段的内容。浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中经过执行，最终渲染出来的网页，即前端渲染。

单页面富应用阶段：

SPA（Single page application）在前后端分离的基础上加了一层前端路由，由前端来维护一套路由规则。整个网页只有一个html页面，由前端对url和页面之间的映射关系。

什么是vue-router?

vue-router是Vue.js官方的路由插件，与vue.js深度集成，适用于构建单页面应用程序。路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面路径的改变就是组件的切换。

vue-router的封装

步骤一：安装 vue-router 插件

npm install vue-router --save

步骤二：在模块化工程中使用

  1. 导入路由对象，并且调用 Vue.use( VueRouter )
  2. 创建路由实例，并且传入路由映射配置
  3. 在Vue实例中挂载创建的路由实例 

vue-router的使用

安装vue-router之后，在src目录下新建router文件夹，并创建index.js文件进行配置：

（Vue CLI 创建项目时选择vue-router后可以自动生成该目录文件）

router/index.js

//配置路由信息
import Router from 'vue-router'//导入vue-router
import Vue from 'vue'//导入vue
import HelloWorld from '@/components/HelloWorld'

//Vue.use(插件)，安装插件
Vue.use(Router)

//创建并导出
export default new Router({
  routes: [//处理url与组件之间的映射关系
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在main.js文件中导入并引用

main.js

import Vue from 'vue'
import App from './App'
import router from './router'//导入创建的router

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 配置路由的映射关系：

在components文件夹下创建两个组件： Home.vue、About.vue文件

<template>
  <div>
    <h2>Home</h2>
    <p>Home组件</p>
  </div>
</template>

<script>
export default {
  name:"Home"
}
</script>

<style>

</style>
<template>
  <div>
    <h2>About</h2>
    <p>About组件</p>
  </div>
</template>

<script>
export default {
  name:"About"
}
</script>

<style>

</style>

配置映射关系：打开router/index.js文件，配置routers:[]

//配置路由信息
import Router from 'vue-router'//导入vue-router
import Vue from 'vue'//导入vue

//导入创建的组件Home、About
import Home from '../components/Home'
import About from '../components/About'

//Vue.use(插件)，安装插件
Vue.use(Router)

//创建并导出
export default new Router({
  routes: [//处理url与组件之间的映射关系
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

 在App.vue文件中写标签进行路由切换：

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>

</style>

固定标签<router-link></router-link> 和 <router-view></router-view>

router-link 和 router-view 是 vue 自动注册的两个组件，前者最终会被渲染成a标签，后者决定了渲染出来的组件放在什么位置进行显示，二者缺一不可。

运行结果：

 总结以上vue-router的使用步骤：

  1. 创建路由组件
  2. 配置路由映射：组件和路由的映射关系
  3. 使用路由：通过<router-link>和<router-view>

路由的默认配置 ：router/index.js

//创建并导出
export default new Router({
  routes: [//处理url与组件之间的映射关系
    {//设置路由的默认路径
      path:'',
      redirect:'/home',//重定向，一旦页面路径为' '时，默认指向 /home
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ],
  mode:'history',//默认情况下使用hash方式: #/home，修改为 history 模式后，为: /home
  // linkActiveClass: 'active' //路由标签被点击时添加class属性为active，默认情况下是 router-link-exact-active
})

项目运行，则默认指向 /home 

 <router-link>的属性

<router-link>除了to属性进行路由跳转之外，还有一些其他属性，比如tag属性

默认情况下，<router-link>会被渲染成<a>标签：

<router-link to="/home" tag="button">Home</router-link>
<router-link to="/about" tag="button">About</router-link>

replace属性：不能通过浏览器左上角的 ⬅➡ 进行返回操作：

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

当路由跳转标签被点击时，vue会自动为该标签添加一个class:

通过这个属性，我们可以对标签的点击样式进行控制。

App.vue中添加样式：

<style>
.router-link-exact-active{
  color: red;
}
</style>

 

路由代码跳转

<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button">Home</router-link>
    <router-link to="/about" tag="button">About</router-link> -->
    <button @click="homeClick">Home</button>
    <button @click="aboutClick">About</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      //通过代码修改路由: vue-router 为每一个元素都添加了$router属性
      this.$router.push('/home')//实现路由修改，可以返回
      // this.$router.replace('/home')//不能返回
    },
    aboutClick(){
      this.$router.push('/about')//实现路由修改
      // this.$router.replace('/about')//不能返回
    }
  }
}
</script>

<style>
.router-link-exact-active{
  color: red;
}
</style>

动态路由 

有时候一个页面的path路径很可能是不确定的，比如我们进入用户界面时，希望出现以下路径：

/user/aaa，/user/bbb，/user/ccc，除了前面的/user之外，后面还跟上了用户的ID。这种path和componment的匹配关系就是动态路由，也是路由传递数据的一种方式。

新建组件 User.vue

<template>
  <div>
    <h2>用户界面</h2>
    <p>动态路由</p>
  </div>
</template>

<script>
export default {
  name: 'User',
}
</script>

<style>

</style>

配置路由：router/index.js

//配置路由信息
import Router from 'vue-router'//导入vue-router
import Vue from 'vue'//导入vue

//导入创建的组件Home、About
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

//Vue.use(插件)，安装插件
Vue.use(Router)

//创建并导出
export default new Router({
  routes: [//处理url与组件之间的映射关系
    {//设置路由的默认路径
      path:'',
      redirect:'/home',//重定向，一旦页面路径为' '时，默认指向 /home
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user/:userId',
      component: User
    }
  ],
  mode:'history',//默认情况下使用hash方式: #/home，修改为 history 模式后，为: /home
  // linkActiveClass: 'active' //路由标签被点击时添加class属性为active，默认情况下是 router-link-exact-active
})

App.vue

<template>
  <div id="app">
    <router-link to= "/home" tag="button">Home</router-link>
    <router-link to= "/about" tag="button">About</router-link>
    <router-link :to= "'/user/'+ userId" tag="button">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:'xiaoyuer'
    }
  }
}
</script>

<style>
.router-link-exact-active{
  color: red;
}
</style>

运行结果：

 this.$route 获取当前活跃的路由（被点击的），this.$router为整个路由对象，包括很多路由。

this.$route.params可以拿到当前活跃路由的一些参数信息，例如：

User.vue

<template>
  <div id="app">
    <router-link to= "/home" tag="button">Home</router-link>
    <router-link to= "/about" tag="button">About</router-link>
    <router-link :to= "'/user/'+ userId" tag="button">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:'xiaoyuer'
    }
  }
}
</script>

<style>
.router-link-exact-active{
  color: red;
}
</style>

运行结果：

路由懒加载：

当我们对应用程序进行打包时，javaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候再加载对应的组件，这样就能够更加高效。

ES6中懒加载的写法：

const Home = () => import('../components/Home.vue')

router/index.js

//配置路由信息
import Router from 'vue-router'//导入vue-router
import Vue from 'vue'//导入vue

//导入创建的组件Home、About
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

//懒加载的方式
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
//Vue.use(插件)，安装插件
Vue.use(Router)

//创建并导出
export default new Router({
  routes: [//处理url与组件之间的映射关系
    {//设置路由的默认路径
      path:'',
      redirect:'/home',//重定向，一旦页面路径为' '时，默认指向 /home
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user/:userId',
      component: User
    }
  ],
  mode:'history',//默认情况下使用hash方式: #/home，修改为 history 模式后，为: /home
  // linkActiveClass: 'active' //路由标签被点击时添加class属性为active，默认情况下是 router-link-exact-active
})

这样在打包时，会将每一个组件都打包成一个独立的js文件。当页面需要加载时，再对相应的组件进行调用，提高应用程序的性能。

路由嵌套 

路由嵌套是指再一个路由页面中嵌套另一个路由，比如在 home 页面中，我们可以通过 /home/news、/home/message 来访问一些其他内容。一个路径映射一个组件，访问以上两个路径也会分别渲染两个组件：News.vue 和 Message.vue。对应关系如图所示：

实现嵌套路由的步骤：

  1. 创建对应的子组件，并且在路由映射中配置对应的子路由。
  2. 在组件内部使用 <router-link> 和 <router-view>标签。

HomeNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
export default {
}
</script>

<style>

</style>

HomeMessage.vue

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

配置路由：router/index.js

导入（懒加载）

const HomeNews = () => import('../components/HomeNews')
const Homemessage = () => import('../components/HomeMessage')

配置子路由：

{
      path: '/home',
      component: Home,
      children:[
        {//子路由的默认路径
          path:'',
          redirect:'news'
        },
        {
          path: 'news',
          component:HomeNews
        },
        {
          path: 'message',
          component:Homemessage
        }
      ]
 }

在 Home 组件中使用：

<template>
  <div>
    <h2>Home</h2>
    <p>Home组件</p>
    <h2>嵌套路由</h2>
    <router-link to="/home/news">新闻News</router-link>
    <router-link to="/home/message">消息News</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:"Home"
}
</script>

<style>

</style>

 运行结果：

 Vue-Router 参数传递

vue-router 传递参数的方式主要有两种

params 类型：即动态路由

  1. 配置路由格式：/router/:id
  2. 传递方式：在 path 后面跟上对应的值
  3. 传递后形成的路径：/router/123，/router/abc

query 类型:

  1.  配置路由格式：/router，普通配置
  2. 传递方式：对象中使用 query 的 key 作为传递方式
  3. 传递后形成的路径：/router?id=123，/router?id=abc

接下来主要介绍第二种参数传递的方式：

创建组件 Profile.vue 并配置路由，在App.vue中使用：

<router-link :to= "{path:'/profile',query:{name:'xiaoyuer', age: 18, height: 160}}">
    profile</router-link>

运行结果：

Url路径组成：

 获取参数：$route.query

Profile.vue

<template>
<div>
  <h2>Profile组件</h2>
  <h2>{{$route.query}}</h2>
  <h2>{{$route.query.name}}</h2>
</div>
</template>
<script>
export default {
  name:'Profile'
}
</script>

<style>

</style>

一般情况下，传递的数据量较大时，推荐使用 query 的方式进行参数传递。 

导航守卫

beforeEach() 和 afterEach() 为全局导航守卫，用来监听路由跳转。

Keep-alive 与 Vue-Router

在路由跳转过程中，每一次路由跳转，其本质是对组件进行重新创建。这种情况下，当我们对某一个页面进行了大量操作之后，然后切换到下一个页面进行其他操作，当我们再一次切换到前面的页面时，相当于重新创建该组件，页面内容也会被完全刷新，如果要保留上一次的操作，可以使用Keep-alive进行处理，能够阻止组件被频繁地创建和销毁。keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到视图组件都会被缓存。添加keep-alive之后，activated/deactivated 函数能够使用。

activated():当前组件活跃时执行，访问该组件。

deactivated():当前组件不活跃时执行，离开该组件。

 App.vue中添加：

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

Home.vue 

 

<keep-alive> 的属性 

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

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

不情不愿
关注
专栏目录
Vue路由详细安装使用方法，脚手架安装使用方法
z27566的博客
10-11 2052
一个网站的所有页面都继承在一个html的文件里面通过切换div模拟页面的切换1，资源公用2，前后端分离3，页面切换流畅1，对搜索SEO引擎不友好地址改变，不刷新页面，监听地址栏变化实现页面局部更新锚点（hash）变化不会刷新页面；H5新增特性。
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
Vue.js使用vue-router构建单页应用
大灰狼的小绵羊哥哥的博客
03-09 1677
传统的网页应用 单页应用 单页应用的优缺点 每种技术都有其利弊，单页应用也是如此。 无刷新体验，这个应该是最显著的有点，由于路由分发直接在浏览器端完成，页面是不刷新，对用户的响应非常及时，因此提升了用户体验；完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；API 共享，如果你的服务是多端的（浏
vue路由和路由安装
最新发布
m0_64455070的博客
07-05 1965
多种导航模式：Vue路由支持不同的导航模式：hash模式（默认）和history模式。实现页面的无刷新切换：使用Vue路由可以在单个web页面中实现应用程序内的页面切换，而无需重新加载整个页面，这将更快地为用户提供请求的内容。1）理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理。实现嵌套路由和视图：Vue路由使您可以将组件树映射到路由，以构建复杂的用户界面，同时保持组件和路由之间的关系。这时候代表你的路由下载成功了，我们需要引入它。
Vue路由
qq_57420582的博客
09-13 2099
Vue路由
vue路由的安装和配置
IT12345666的博客
05-29 3724
vue路由的安装和配置 1.安装 1.安装现成的工具包vue-router npm i vue-router@3.5.2 -S 2.在src中新建router/index.js import Vue from 'vue' import VueRouter from 'vue-router' //调用 Vue.use()函数，把VueRouter 安装为Vue的插件 Vue.use(VueRouter); //创建路由的实例对象 const router = new VueRouter(); //向
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中，可以在模板中使用 <router-link> 标签进行导航，并通过 :to 属性传递参数。如果直接在 <router-link> 标签中传参存在问题，可以使用编程式导航，即通过 this.$router.push 方法来跳转页面，并传递...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
VUE路由安装和使用
m0_67388537的博客
07-25 224
通过createRouter创建路由对象并传入routes和history模式。创建history路由模式。在main.js中引入并使用。创建基于内存的历史记录。创建hash路由模式。vue2.x使用的是。
Vue路由（router）的安装和使用
weixin_47957908的博客
10-31 3024
Vue路由（router）的安装和使用。
vue路由的安装和使用
qq_35112578的博客
10-15 4379
vue 路由的安装和应用
Vue-路由-安装和配置方式
超级氯化钾的博客
04-23 426
安装和使用 npm install vue-router --save 导入路由对象，并调用Vue.use(VueRouter) 创建路由实例，并传入路由映射配置 在Vue实例中挂在创建的路由实例 新建router文件夹，新建index.js文件 //配置路由相关的信息 import VueRouter from 'vue-router' //1.通过Vue.use(插件)，安装插件 import Vue from "vue"; Vue.use(VueRouter) //2. 创建VueRouter对
Vue Router的安装与基本使用方法
qq_40930841的博客
04-29 1716
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
vue -- 路由安装 入门使用
程序员小哲的博客
10-10 1504
安装路由 cnpm install --save vue-router 配置路由 创建src/router/index.js目录，输入以下代码 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '../components/HelloWorld' Vue.use(Router); export default new Router({ routes:[ {
Vue2路由（router）的安装和使用
一只猫
12-24 3233
router文件夹中的index.js文件在导入时，可以省略不写index：import router from'./router'页面中的表格，点击任何一条即可跳转到。就是你想要传递的参数。就是你想要传递的参数。
vue-router 设置默认路由
qq_35457469的博客
08-28 4123
设置 redirect值，就可以默认显示你想显示的那个路由页面 import Vue from 'vue' import Router from 'vue-router' import Content from '@/components/Content' import Doctor from '@/components/comtent/Doctor' Vue.use(Router) expo...
Vue.js实战：vue-router路由与页面导航详解
"vue-router路由与页面间导航实例解析" Vue Router是Vue.js的官方路由管理器，它允许我们在单页面应用...在组件中，我们可以使用`router-link`组件创建链接，以及`this.$router.push()`方法来程序化地导航到新的路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值