前端vue入门(纯代码)25_路由vueRouter

neneduck

已于 2023-07-10 14:11:36 修改

阅读量138

点赞数

分类专栏： Vue前端文章标签：前端 vue.js javascript

于 2023-07-10 14:08:01 首次发布

本文链接：https://blog.csdn.net/m0_62003092/article/details/131637582

版权

Vue前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

如果耐不住寂寞，你就看不到繁华。

【`23.Vue Router--路由`】

[可以去官网看看Vue Router文档](入门 | Vue Router (vuejs.org))

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

00.知识铺垫

1）路由理解理解

一个路由（route）就是一组映射关系（key-value)
多个路由需要路由器（router）进行管理
路由的存在就是为了实现单页面应用

2)对spa应用的理解

单页Web应用（single page web application, SPA）
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

01.路由的理解

什么是路由

一个路由就是一组映射关系（key---value）
key为路径，value可能是function或Component

router和route

router：中文直译是“路由器的意思”，简单来说就是路由（route）的管理者
route：指的就是单个路由或者某一个路由

02.路由的分类

后端路由

理解：value是function，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由

理解：value是component，用于展示页面内容
前端路由：key是路径，value是组件。
工作过程：当浏览器的路径改变时，对应的组件就会显示
作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）。

03.路由的安装

路由的安装也是要要借助Vue脚手架，通过npm命令进行安装

值得注意的是：

一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3

安装vue-router，命令：npm i vue-router@3【vue2安装】

04.配置和使用路由

第一步

在src文件夹下创建router/index.js文件，并配置路由：

//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";

//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'

//创建并暴露一个router
export default new VueRouter({
    routes:[
        {
            path:'/跳转路径',
            component:组件名称
        },
        {
            path:'/跳转路径',
            component:组件名称
        },
    ]
})

第二步

在main.js中配置路由：

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//应用VueRouter
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

第三步

在对应的组件中使用路由：
实现切换：

<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/跳转路径">跳转</router-link>

active-class

首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选中
样式的切换，在 vue-router 中要使用 active-class 。

<router-link active-class="active" to="/跳转路径">跳转</router-link>

注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

指定位置展示路由组件：

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<!-- 指定组件的呈现位置 -->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view> <router-view>

值得注意的几个点：
1.一般情况下，我们在使用路由时，用到的路由组件通常会在src文件夹下新创建一个名为pages的文件夹来存放路由组件，而一般的组件则放在components中。

2.路由组件在被切换时，原本的路由是已经被销毁了的，只有再次点击对应的导航或路由切换按钮，则该路由组件才会再次被挂载。

3.每个路由组件都有自己的$route属性，里面存储该路由组件的信息。

4.一个应用只有一个$router属性，用于管理所有路由。

具体实例代码

创建路由组件文件：src/pages/xxx.vue.
About.vue:

<template>
	<h2>我是About的内容</h2>
</template>

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

<style scoped>
h2 {
  background-color: rgb(75, 210, 138);
}
</style>

Home.vue:

<template>
  <h2>我是Home的内容</h2>
</template>

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

<style scoped>
h2{
  background-color: rgb(233, 175, 226);
}
</style>

创建路由配置文件src/router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建并暴露一个路由器
export default new VueRouter({
// 定义一些路由
// 每个路由都需要映射到一个组件。
routes: [
  //配置路由路径和路由组件
  {
    path: '/about',
    component: About, //要跳转到的组件   
  },
  {
    path: '/home',
    component: Home,
  }
]
})

在main.js中配置路由：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from "vue-router";
//引入路由器
import router from "./router";

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
  // property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
  router,  //配置router
  mounted() {
    console.log(this);
  },
})

在app.vue中展示路由视图：

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
		  <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

		  <!-- Vue中借助router-link标签实现路由的切换 -->
		  <router-link 
          class="list-group-item" 
          active-class="active" 
          to="/about">About</router-link>
          <router-link 
          class="list-group-item"
          active-class="active" 
          to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
			<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

public/index.html

<!DOCTYPE html>
<html lang="zh-en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式库 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>