526互联

Vue插件router

发布时间 2023-03-22 21:13:51作者: 清安宁

路由

  • 概念: 一组key-value对应关系
key1 + value1 => 路由route
key2 + value2 => 路由route
......

- 上述路由的集合,就是'路由器'(router)

- key为路径,value对应 组件或者 回调func

  • 插件: vue-router,作路由跳转(专门实现SPA应用)

  • SPA应用

- 单页web应用(single page web application,SPA)

- 整个应用只有一个完整的页面

- 点击页面中的导航链接不会刷新页面,只会作页面的局部更新

- 数据需要通过ajax请求获取
  • vue-router安装/引入
npm i vue-router@3 // 安装和vue2版本相匹配的router版本

### main.js
......
import VueRouter from 'vue-router' // 引入

Vue.use(VueRouter) // 使用

new Vue({
  render: h => h(App),
}).$mount('#app')
  • demo演示:路由实现两个页面的切换,但是页面不刷新,只更新页面部分内容
### About组件
<template>
	<div>
		<h1>我是About组件的内容</h1>
	</div>
</template>

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

### Home组件
<template>
	<div>
		<h1>我是Home组件的内容</h1>
	</div>
</template>

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

### router(src目录底下新建该目录)
### router/index.js
import VueRouter from 'vue-router' // 引入router对象

import About from '../components/Router/About.vue' // 引入两个组件
import Home from '../components/Router/Home.vue'

export default new VueRouter({ // 实例化
	routes:[ // 配置路由
		{
			path:'/about', // 配置路径
			component:About // 注册组件
		},
		{
			path:'/home',
			component:Home
		},
	]
})

### main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import router from './router' // 导入router对象

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router:router // 配置
}).$mount('#app')

### app.vue(使用bootstrap框架)
<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标签实现路由的切换(本质的渲染还是变回<a>标签) -->
		  <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>

- 小结:
	- 使用<router-link>来指定path
		- 单单指定 <router-link> 只实现了url路径跳转,组件内容并不会被呈现出来
		
	- 使用<router-view>来指定组件呈现的位置

1.小结

  1. 安装vue-router，命令：npm i vue-router

  2. 应用插件：Vue.use(VueRouter)

  3. 编写router配置项:

    //引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

  4. 实现切换（active-class可配置高亮样式）

    <router-link active-class="active" to="/about">About</router-link>

  5. 指定展示位置

    <router-view></router-view>