Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌.
1. Vue路由的安装和配置
1.1 安装vue路由
npm install vue-router --save-dev
2.2 配置vue路由
// 1\. 导入路由并使用
import Vue from 'vue' // 导入vuerouter
import VueRouter from 'vue-router';
// 使用功能VueRouter插件
Vue.use(VueRouter)
// 2\. 创建路由实例,并配置路由映射
// 2.1 创建路径与组件的映射关系
let routes = [
{
path:'/home',
component: Home
},
{
path:'/list',
component: List
},
{
path:'/about',
component: About
}
]
// 2.2 创建路由实例
var router = new VueRouter({ // 配置路由
routes,
})
// 3\. 将配置好的路由在Vue实例中使用
new Vue({
el:'#app',
router
})
2. 路由的基本概念
路由中有三个基本的概念route,routes,router.
-
route, 它是一条路由,就是一个路径和组件的映射关系
// route { path:'/', component: Home } -
routes 是一组路由，把每条route的路由组合起来，形成一个数组。
routes:[ { path:'/', component: Home }, { path:'/list', component: List } ] -
router 是一个路由机制，相当于一个管理者，他来管理路由。因为routes只是定义了一组路由，也就是一组路径和组件的对应关系,当用户点击了按钮,改变一个路径,router会更加路径处理不同组件
var router = new VueRouter({ // 配置路由 routes:[...] })
3. 路由的基本使用
3.1 内置的两个组件
router-link组件说明:
-
router-link是vue-router已经注册好的组件,直接使用就可以了 -
router-link是用来切换路由的,通过to属性来跳转到指定的路由 -
router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签
router-view组件说明:
-
router-view用来指定当前路由所映射的组件显示的位置 -
router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示 - 和动态组件的效果类似
使用展示:
<!-- 导航-点击跳转 -->
<!-- to属性类似与a标签的href -->
<router-link to="/home">首页</router-view>
<router-link to="/list">列表</router-view>
<router-link to="/about">关于作者</router-view>
<!-- 展示路由组件 -->
<router-view></router-view>
4. 路由使用示例:
4.1 示例目录
image
4.2 源码部分
4.2.1 组件相关:
Home组件
文件: components => Home.vue
<template>
<div id="home">
<h2>首页</h2>
<div>这就是首页</div>
</div>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
#home{
color:#fff;
text-align:center;
}
h2{
font-size:40px;
line-height: 80px;
}
</style>
List组件
文件: components => List.vue
<template>
<div id="list">
<h2>列表页</h2>
<div>这就是列表页</div>
</div>
</template>
<script>
export default {
name:"List"
}
</script>
<style>
#list{
color:#fff;
text-align:center;
}
h2{
font-size:40px;
line-height: 80px;
}
</style>
About组件
文件: components => About.vue
<template>
<div id="about">
<h2>关于作者</h2>
<div>这就是关于作者页</div>
</div>
</template>
<script>
export default {
name:"About"
}
</script>
<style>
#about{
color:#fff;
text-align:center;
}
h2{
font-size:40px;
line-height: 80px;
}
</style>
4.2.2 定义和配置路由关系
路由:
文件: router => index.js
// 1\. 导入模块
import Vue from 'vue';
import VueRouter from 'vue-router';
// 2\. 使用VueRouter插件
Vue.use(VueRouter)
// 3\. 导入组件
import Home from '../components/Home';
import List from '../components/List';
import About from '../components/About';
// 4\. 配置路由与组件映射关系
let routes = [
{
path:'/home',
component: Home
},
{
path:'/list',
component: List
},
{
path:'/about',
component: About
}
]
// 5.实例化路由
const router = new VueRouter({
routes
})
export default router
4.2.3 使用路由
使用路由进行页面跳转
文件: App.vue
<template>
<div id="app">
<div class="content">
<router-view></router-view>
</div>
<ul>
<li>
<router-link to="/home">首页</router-link>
</li>
<li>
<router-link to="/list">列表页</router-link>
</li>
<li>
<router-link to="/about">关于作者</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background: skyblue;
}
ul{
display: flex;
position: fixed;
bottom: 0;
left: 0;
right:0;
height:60px;
border-top:1px solid #999;
}
li{
flex:1;
background: #eee;
border-right:1px solid #999;
}
a{
display:block;
line-height:60px;
text-align: center;
font-size:20px;
text-decoration: none;
}
.content{
position: fixed;
top:0;
left:0;
right:0;
bottom:61px;
}
</style>
4.3 示例显示结果
image
通过示例:我们发现vue路由默认使用的是hash路由
5. 路由的配置
5.1 根路由配置
上面的示例中,我们在配置路由映射的时候,这配置了/home,/list,/about三条路由,
如图:
image
但是我们在每次打开页面是,默认访问的路径是/,这条路径并没有映射任何组件内容,
因此router-view组件占位的地方不会显示任何内容
因而我们需要配置根路由显示的内容
有两种解决方案,
5.1.1 配置路由组件
第一种就是配置根路由/显示的组件,如下
{
path:"/",
component: Home,
},
路由表
image
显示结果
image
5.1.2 配置路由重定向
使用redirect字段配置路由重定向
{
path:"/",
// 路由重定向:
// 虽然访问的是/根路由,但是自动重新转义到/home路由
redirect: "/home"
},
路由表:
image
显示结果:
image
推荐使用重定向的配置方法.
5.2 路由模式
上一节有提到过,前端路由的实现有两种方案,一种是通过hash值,一种是通过H5 的history.
但是Vue路由默认使用hash模式.
如图:
image
hash路由中#看起来多多少少有点别扭.我们就像使用history模式,那要怎么设置呢
VueRouter配置项中处理提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式
路由模式配置:
image
路由显示样式:
image
网友评论