Vue 路由配置

为什么使用路由？

  在项目中创建了 First.vue 和 Second.vue 两个页面，如果按照组件方式进行操作这两个页面，数据固定显示在 App.vue 中，但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中，也是需要通过不同的 URL 在 App.vue 中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。

什么是路由？

   在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在 App.vue 中的，当更改 URL 后只改变 App.vue 页面中路由部分对应的内容，也就是说通过路由显示时，也是属于局部刷新效果。

注：在 App.vue 中通过 <router-view> 显示路由内容。

1. 安装路由依赖

在 IDEA 中的 Terminal 面板运行命令：cnpm install --save vue-router

说明：--save 表示把添加的依赖写入到 package.json，如果没有 --save 效果上也是可以的，但是加上可以更好的知道项目都使用了哪些组件。

运行成功后会在 package.json 中增加了 router 相关依赖：

2. 新建两个页面

在 src 下新建了 views 文件夹，并在该文件夹下新建了两个 .vue 的页面：

页面一：src/views/First.vue

<template>
    The First Page.
</template>

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

<style scoped>

</style>

页面二：src/views/Second.vue

<template>
    The Second Page.
</template>

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

<style scoped>

</style>

此时这两个页面是无法直接访问的。

3. 修改 main.js

import { createApp } from 'vue'
import App from './App.vue'


//1.导入路由依赖，安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';

//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";

//3.创建路由对象，new VueRouter为上面import设置的名称
const router = createRouter({
    history: createWebHistory(), //没有history，访问URL会有#
    routes:[
        {
            path: '/first',
            component: First
        },
        {
            path: '/second',
            component: Second
        },
    ]
});

//注意use要在mount之前，使用该路由
createApp(App).use(router).mount('#app');

4. 修改 App.vue

必须要有 <router-view/> 否则无法显示路由控制的页面。

<template>
    <div id="app">
        <p>这里是 App.vue 页面</p>
        <!--路由视图-->
        <router-view/>
       <MyComponent name="张三" v-bind:age="15"></MyComponent>
    </div>
</template>

注意：如果 npm run serve 启动运行项目时，出现如下的保存信息：

需要在 vue.config.js 的配置文件中，加入一行 lintOnSave:false，再重新启动项目运行。

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false  //添加这一行
});

5. 优化结构

把 main.js 中和路由相关的内容放到一个单独的 js 文件中，这代码更容易维护。在 src 下新建 router 文件夹，在文件夹中新建 index.js。

1、index.js

//1.导入路由依赖，安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';

//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";
const routerHistory = createWebHistory();

//3.创建路由对象，new VueRouter为上面import设置的名称
const router = createRouter({
    history: routerHistory,
    routes:[
        {
            path: '/first',
            component: First
        },
        {
            path: '/second',
            component: Second
        },
    ]
});

export default router;

最后一行 export default router 必须将这个配置好的路由信息导出，否则 main.js 无法获取 router 对象。

2、main.js

import { createApp } from 'vue'
import App from './App.vue'

//导入./router/index文件里面配置好的路由
import router from './router/index'

//注意use要在mount之前，使用该路由
createApp(App).use(router).mount('#app');

这样优化之后对于代码维护更加简便。

路由的理解

生活中的路由：

vue-router的理解：
vue 的一个插件库，专门用来实现SPA应用(single page web application)

对SPA应用的理解：
1.单页Web应用(single page web application，SPA)
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4.数据需要通过ajax请求获取

什么是路由?
1.—个路由就是一组映射关系 (key - value)
2. key 为路径, value 可能是 function 或 component

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

2.前端路由：
1)理解：value 是 component，用于展示页面内容
2)工作过程：当浏览器的路径改变时，对应的组件就会显示

路由的基本使用

我们需要完成一个功能，点击左侧导航切换右侧内容，页面如下：

前提：布局编写
我们之前在 public 下新建了 css 文件夹，并放入了 bootstrap.css，并在 index.html 中进行了引入：

<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

在 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">
          <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body"><h2>我是About的内容</h2></div>
        </div>
      </div>
    </div>
  </div>
</template>

创建 About.vue 和 Home.vue 组件，两个文件只有文字不同

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

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

<style scoped>

</style>

1、安装vue-router
由于我们目前学习的是 vue2 ，所以我们需要指定 vue-router 的 3 版本，不指定会默认安装 4 版本，而 4 版本只能在 vue3 中使用，所以我们执行：
npm i vue-router@3

2、和 components 同级，创建 router 文件夹，其下创建 index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from "../components/About";
import Home from "../components/Home";
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

3、main.js 引入 vue-router，引入路由器
vue-router 是个插件，所以我们在 main.js 中引入并使用，同时引入刚才写的 index.js，并配置

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//引入vue-router
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),
    router:router
})

4、修改页面
App.vue 中 a 标签改为 <router-link>，其中active-class可配置高亮样式

<!--原始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>

把要区分展示的位置改为<router-view>标签

<div class="panel-body">
	<!--指定组件的呈现位置-->
	<router-view></router-view>
</div>

运行程序：

一些注意点

1、路由组件通常存放在 pages 文件夹，一般组件通常存放在 components文件夹

我们把头部单独写成一个组件，新建 Banner.vue

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
</template>

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

在App.vue 中引入并使用

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      ......
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
export default {
  name: 'App',
  components: {Banner},
}
</script>

我们把 Banner 叫作一般组件，而 About、Home 我们叫作路由组件，一般放在 pages 文件夹里，所以需要修改：

2、通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3、每个组件都有自己的$route属性，里面存储着自己的路由信息
4、整个应用只有一个router，可以通过组件的 $router属性获取到

嵌套路由

先看效果：

新建 Message.vue 和 News.vue

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <a href="/ message1">{{m.title}}</a>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
    return{
      messageList:[
        {id:"001",title:"消息001"},
        {id:"002",title:"消息002"},
        {id:"003",title:"消息003"},
      ]
    }
  }
}
</script>

<style scoped>

</style>

News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

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

制定路由规则，修改 index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
    ]
})

修改 Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

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

📢有两点需要注意：
1、index.js 中/about 和 /home 是一级路由，news 和 message 是二级路由，规则前不需要加斜杠了
2、Home.vue 中的路径，需要写完整路径 /home/news

学习完可以继续下一章啦🎉：路由参数传递

概念

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现，并完成资源的分发
后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
2).前端路由是依靠hash值(锚链接)的变化进行实现
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

Vue Router

简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

Vue Router的使用步骤

1. 导入js文件

   <script src="lib/vue_2.5.22.js"></script>
   <script src="lib/vue-router_3.0.2.js"></script>
   

2. 添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

   <router-link to="/user">User</router-link>
   

3. 添加路由填充位（路由占位符）

   <router-view></router-view>
   

4. 定义路由组件

   var User = { template:"<div>This is User</div>" }
   

5. 配置路由规则并创建路由实例

   var myRouter = new VueRouter({
       //routes是路由规则数组
       routes:[
           //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
           //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
           {path:"/user",component:User},
           {path:"/login",component:Login}
       ]
   })
   

6. 将路由挂载到Vue实例中

   new Vue({
       el:"#app",
       //通过router属性挂载路由对象
       router:myRouter
   })
   

补充：
路由重定向：可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可，如

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

分类

嵌套路由

嵌套路由最关键的代码在于理解子级路由的概念：
比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:
/login/account
/login/phone

动态路由

补充：
1.我们可以通过props来接收参数

2、还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给
组件进行使用

3、如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为
函数形式。

命名路由

给路由取别名

编程式导航

调用js的api方法实现导航

写在最后

✨$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$