目录
第二步: 在src文件夹下创建一个router文件夹然后在文件夹下创建index.js
第三步: 回到main.js中引入创建的 router 并在vue实例对象中使用
一，路由理解
1）.理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理
2）.前端路由：key是路径，value是组件
3）.作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）
二，基本配置
前期准备： 安装vue-router 全局配置 ，命令： npm i vue-router （默认安装的是4版本适配的是vue3，如果使用的是vue2的话，必须选定3版本 npm i vue-router@3。
第一步: 在main.js文件中引入并使用插件
// 第一步: 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)第二步: 在src文件夹下创建一个router文件夹然后在文件夹下创建index.js
index.js中写路由的核心代码
// 该文件是专门用于创建整个应用的路由器
// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'
// 引入一下用到的组件
import About from '../components/About'
// 第二步创建router实例对象并暴露
export default new VueRouter({
routes: [
{
// path是路径
path: "/about",
//跳转的组件
component: About
},
]
})
// 然后去main.js中引入router实例
第三步: 回到main.js中引入创建的 router 并在vue实例对象中使用
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App'
// 第一步: 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)
// 第二步: 创建router文件夹 引入实例
import router from './router'
// 关闭生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
// 指定容器
el: '#app',
// 解析App模板
render: h => h(App),
// 使用路由
router
})路由的基本就配置完成了
三，路由的使用
实例演示，先把静态页面准备好。
第一点：a标签在路由中的改变
由路由管理的地方 a标签转换成 router-link 标签 href="相对路径" 变成 to="路由路径"
要显示组件的地方需要用到 router-view占位，当点击时显示About组件中的内容时就会替换掉router-view
通常由路由管理的组件单独放在pages文件夹下，不需要在App组件中引入和注册
<template>
<div>
<div class="row">
<Banner></Banner>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- a标签在路由器中被router-link取代 -->
<!-- 使用路由提供的标签 点击跳转到/about路径 显示哪个组件在路由中配置好-->
<!-- active-class 点击时激活类名 -->
<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">
<!-- 这里存放由路由分配 这里放显示的组件类似于slot-->
<!-- 显示的组件会替换掉router-view -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 自己引入的组件 由路由管理的组件成为路由组件,通常放在pages文件夹下面
// 和普通的组件分开 而且不需要引入和注册
import Banner from "./components/Banner";
export default {
name: "App",
// 组测组件
components: { Banner },
};
</script>
<style>
</style>路由中的配置
// 该文件是专门用于创建整个应用的路由器
// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'
// 引入要用到的组件
import About from '../pages/About'
import Home from '../pages/Home'
// 第二步创建router实例对象并暴露
export default new VueRouter({
routes: [
{
// 当路径跳转到/about时显示About组件
path: "/about",
component: About
},
{
path: "/home",
component: Home
}
]
})
// 然后去main.js中引入router实例