Vue路由一(简介、分类、基本使用、注意事项)

news2024/11/12 23:43:31

1. 简介

路由就是一组key:value的对应关系。vue可能是function或component
多个路由，需要经过路由器管理

是为了实现SPA(single page web application)单页面应用。以前需要实现多个html，现在只需实现一个html就能达到多个html的功能。如点击导航区的班级管理，只有url地址发生变化，而页面不会刷新，也不会打开新的标签页
SPA应用

SPA的原理：当我们点击班级管理，router发现url路径变成了/class，就会去加载班级组件；router发现url路径变成了/subject，就会去加载学科组件

2. 路由的分类

路由vue-router是vue的一个插件库，专门用来实现SPA应用

后端路由：
- 理解：value是function, 用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
  来处理请求, 返回响应数据
前端路由：
- 理解：key是url的路径，value是component，用于展示页面内容
- 工作过程：当浏览器的路径改变时, 对应的组件就会显示

3. 基本使用

使用命令cnpm install vue-router@3安装路由插件
同时使用命令cnpm install bootstrap@3安装bootstrap，后面的示例会用到里面的bootstrap.css
About.vue

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

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

News.vue

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

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

src/router/index.js。创建路由器，定义url路径和组件的映射规则。如访问/about就加载About组件

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// import {createRouter} from 'vue-router'

// 引入组件
import About from '../components/About'
import News from '../components/News'

// 创建并暴露一个路由器
// export default createRouter({})
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/news',
			component:News
		},
		{
			path:'/',
			redirect:'/about'
		}
	],
	// 设置每次url跳转后，右侧滚动条的位置
	scrollBehavior() {
	    return {
	        left: 0,
	        top: 0
	    }
    }
})

App.vue
- 这里的css都是通过import 'bootstrap/dist/css/bootstrap.css'来实现的
- 使用<router-link>标签，来实现<a>标签的跳转效果，最终也会被解析成<a>标签。to表示跳转的路径，就会激活路由器路径对应的组件，当点击当前标签时会激活active-class所在的css样式
- <router-view>用于显示激活的组件

<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="./news.html">News</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="/news">News</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 原始html中我们使用h2标签直接显示内容 -->
            <!-- <h2>我是XXX的内容</h2> -->

            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import 'bootstrap/dist/css/bootstrap.css'

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

main.js。引入路由插件并使用路由插件；引入路由器，并开启路由器

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false

Vue.use(VueRouter)

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