Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的焦点深度集成，让构建单页面应用变得轻而易举.
1. Vue路由的安装和配置
1.1 安装vue路由
npm install vue-router --save-dev2.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 示例目次
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 router4.2.3 利用路由
利用路由举行页面跳转
文件: App.vue
<template> <div id="app"> <div通过示例:我们发现vue路由默认利用的是hash路由
5. 路由的配置
5.1 根路由配置
上面的示例中,我们在配置路由映射的时间,这配置了/home,/list,/about三条路由,
如图:
但是我们在每次打开页面是,默认访问的路径是/,这条路径并没有映射任何组件内容,
因此router-view组件占位的地方不会表现任何内容
因而我们必要配置根路由表现的内容
有两种办理方案,
5.1.1 配置路由组件
第一种就是配置根路由/表现的组件,如下
{ path:"/", component: Home, },路由表
表现效果
5.1.2 配置路由重定向
利用redirect字段配置路由重定向
{ path:"/", // 路由重定向: // 虽然访问的是/根路由,但是主动重新转义到/home路由 redirect: "/home" },路由表:
表现效果:
保举利用重定向的配置方法.
5.2 路由模式
上一节有提到过,前端路由的实现有两种方案,一种是通过hash值,一种是通过H5 的history.
但是Vue路由默认利用hash模式.
如图:
hash路由中#看起来多多少少有点别扭.我们就像利用history模式,那要怎么设置呢
VueRouter配置项中处置处罚提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式
路由模式配置:
路由表现样式:
|
