1. 路由的概念
2. 认识vue-router
- 目前前端流行的三大前端框架都有自己的路由实现:
- Angular的ngRouter
- React的ReactRouter
- Vue的vue-router
- vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用
- vue-router是基于路由和组件的
- 路由用于设定访问路径, 将路径和组件映射起来
- 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换
3. 安装和使用vue-router
-
安装vue-router
npm install vue-router --save
-
安装步骤和使用步骤
-
导入路由对象,并且调用Vue.use()
-
创建路由实例,并且传入路由映射配置
-
在Vue实例中挂载创建的路由实例
index.js
import Vue from 'vue' import VueRouter from 'vue-router' //2.通过Vue.user(插件),安装插件 Vue.use(VueRouter) //3.定义路由 const routes = [ ] //创建 路由实例 const router = new VueRouter({ //配置路由和组件之间的关系 routes, mode:'history' }) //将对象导出 export default router
main.js
//挂载 import router from './router' new Vue({ el: '#app', router, render: h => h(App) })
-
-
使用
- 创建路由组件
- 配置路由映射: 组件和路径映射关系
- 使用路由: 通过和
-
具体步骤如下
- 创建路由实例
2.挂载到vue实例中
3.创建路由组件
4.配置组件和路径的映射关系
5.使用路由
4. 路由的默认路径
-
默认的情况下,我们一般都是进入网站的首页,我们希望可以渲染首页的内容
-
但是在我们的实现中,默认没有显示首页的组件,需要点击才行
-
实现这种需求,只需要多配置一个路径映射即可
5. Html5的History模式
6.router-link属性
to
用于指定跳转的路径.tag
tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个- 元素, 而不是
replace
replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中active-class
当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
7.路由代码跳转的第二种方式
- 通过router-link中的to属性,我们可以实现页面跳转
- 实现跳转,我们还可以通过JavaScript代码跳转
<button @click="userLink">用户</button>
userLink(){
this.$router.push('/user/'+this.userId)
}
8.动态路由
- 在某些情况下,一个页面的path路径是不确定的,后面可能还更上了用户的ID,这种匹配关系我们称之为动态路由
9. 嵌套路由
- 嵌套路由是一个很常见的功能
- 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
- 创建对应的子组件, 并且在路由映射中配置对应的子路由
- 在组件内部使用标签.
{
path:'/home',
component:Home,
meta:{
title:'首页'
},
children:[
{
path:'',
redirect: 'news'
},
{
path:'news',
component:HomeNews
},
{
path:'messages',
component:HomeMessages
}
]
},
<template>
<div>
<h2>我是首页</h2>
<p>我是首页,嘿嘿嘿</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/messages">消息</router-link>
<RouterView/>
</div>
</template>
<script>
export default {
name: "Home",
}
</script>
<style scoped>
</style>