Vue·Router路由管理器

---

vue-router是官方指定的路由管理器

---

注：使用默认创建vue2版本开发项目

项目引入router组件

npm i vue-router@3.2.0

在main.js文件new Vue中引入router

import Vue from 'vue'
import App from './App.vue'
//import ElementUI from 'element-ui';
import {Button,Radio} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';     

Vue.config.productionTip = false
Vue.use( Button );
Vue.use( Radio );
new Vue({
  router,           // 引入router   
  render: h => h(App),
}).$mount('#app')

在项目根目录下新建router目录用来管理路由

新建index.js文件 配置路由

// 引入vue
import Vue from 'vue'
// 全局引入router
import VueRouter from 'vue-router'
// import { component } from 'vue/types/umd'
// import Home from '../views/Home.vue'  // 1.直接传入 需要先导入依赖

Vue.use(VueRouter)
// 接受数组传递，用来串入路由的相关信息
const routes = [
	{
		path: '/',                 // 根目录
		name: 'Home',              // (可以不配置)函数式编程会使用到
		// component: Home         // 两种引入vue页面方式 1.直接传入 2.按需引入
		component: () => import('../views/Home.vue')  // 2.按需引入
	},
	{
		path: '/user',
		name: 'User',
		component: () => import('../views/User.vue')
	}
]
// Router配置 
const router = new VueRouter({
	mode: 'history',
    routes
})
// 对外进行暴露
export default router

在项目根目录下新建views目录 用来管理vue页面

1. 新建Home.vue 文件

<template>
    <div>我是Home页面</div>
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {}
    }
}
</script>

2. 新建User.vue 文件

<template>
    <div>我是user页面</div>
</template>
<script>
export default {
    name: 'User',
    data() {
        return {}
    }
}
</script>

最后需要在App.vue的div中添加router组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view></router-view>
  </div>
</template>

路由切换-在HelloWorld.vue的div中添加

<template>
  <div class="hello">   
<!-- 路由切换 在HelloWorld.vue的div中添加 -->
  <router-link to="/">
    <el-button>按钮</el-button>
  </router-link>
  <router-link to="/user">
    <el-button @clink="open" type="primary" plain>主要按钮</el-button>
  </router-link>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  </div>
</template>

在router目录 index.js文件下添加路由信息-使路由生效

// 引入vue
import Vue from 'vue'
// 全局引入router
import VueRouter from 'vue-router'
// import { component } from 'vue/types/umd'
// import Home from '../views/Home.vue'  // 1.直接传入 需要先导入依赖

Vue.use(VueRouter)
// 接受数组传递，用来串入路由的相关信息
const routes = [
	{
		path: '/',                 // 根目录
		name: 'Home',              // (可以不配置)函数式编程会使用到
		// component: Home         // 两种引入vue页面方式 1.直接传入 2.按需引入
		component: () => import('../views/Home.vue')  // 2.按需引入
	},
	{
		path: '/user',
		name: 'User',
		component: () => import('../views/User.vue')
	}
]

// Router配置 
const router = new VueRouter({
	mode: 'history',
    routes
})
// 对外进行暴露
export default router