用vue-cli3创建vue项目，可以在创建时让脚手架安装好vue-router，但这里我不这么做，本着学习router的目的，后面一步步手动创建
起步
vue create vue-router-project
1）在components目录下删除掉Holloworld.vue组件及相关代码，新建Home.vue和About.vue组件
Home.vue
<template>
<div>
<h4>这是首页</h4>
</div>
</template>
<script>
</script>
<style>
</style>
About.vue
<template>
<div>
<h4>这是关于</h4>
</div>
</template>
<script>
</script>
<style>
</style>
2）在终端用命令安装router
cnpm i vue-router -s
3）在src目录下新建router目录，router目录下再创建index.js,index.js代码的配置分5步
3.1)引入vue和vue-router并把vue-router装配到vue上
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
3.2)引入Home和About组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
3.3)创建VueRouter实例
const router = new VueRouter({
})
3.4)配置路由规则，这里我们将路由规则提取到路由实例外
const routes = [
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
const router = new VueRouter({
// 配置路由和组件间的对应关系
routes
})
3.5)导出路由
export default
4)main.js的配置
导入路由并挂载到vue实例
image
5)在终端运行项目
npm run serve
运行结果
image
6)当我们希望首页一开始就是展开着的时， 我们可以在路由配置规则中配置redirect(重定向)
{
path:'',
redirect:'/home'
}
image
可以看出我们的访问路径中含有#这个字符，这是hash模式
hash模式下的访问路径
我现在改成history模式，可以在路由实例中配置
image
这时候访问路径就变成了这样，是不是更简洁美观了
history模式
7)<router-link>标签默认是渲染成<a>标签的，我们可以让它渲染成其它标签，<router-link>中的tag属性可能实现，这里我指定它渲染成button
image
8)<router-link>标签中还有一个replace属性，加上它可以实现路径不能返回
<router-link to='/home' replace>首页</router-link>
<router-link to='/about' replace>关于</router-link>
image
9)当按钮被点击时，让它处于一个激活状态
9.1)<router-link>标签用来设置激活状态的默认class是.router-link-active，我们可以直接在<style>标签中加入如下代码
.router-link-active{
color: red;
}
9.2)当我们不想使用.router-link-active这个名字时，vue-router提供了两种方式来让我们指定这个class名
我们可以用<router-link>标签提供的active-class属性来指定class名
<router-link to='/home' replace tag="button" active-class="active">首页</router-link>
<router-link to='/about' replace tag="button" active-class="active">关于</router-link>
或在index.js中router实例中用linkActiveClass这个属性指定class名
linkActiveClass:'active'
在<style>中的代码
.active{
color: red;
}
效果
image
10）我们并不是只能通过<router-link>标签来实现点击跳转，我们还可以这么实现
<button @click="goHome">首页</button>
<button @click="goAbout">关于</button>
在<script>标签的export default中加入
methods:{
goHome(){
// this.$router.replace('/home')
this.$router.push('/home')
console.log("跳转到home")
},
goAbout(){
// this.$router.replace('/about')
this.$router.push('/about')
console.log("跳转到about")
}
}
vue-router当中有$router这个属性，每个组件当中都可以直接拿来用
image
动态路由
1)首先在components目录下创建User.vue组件
<template>
<div>
<h4>这是用户组件----{{$route.params.userId}}</h4>
</div>
</template>
<script>
</script>
<style>
</style>
这里另一个重要的vue-router属性是$route,，我们可以用$route.params. ** 取出传递过来的参数
2)在index.js中引入user组件
import User from '../components/User.vue'
路由配置规则中配置如下动态路由
{
path:'/user/:userId',
component:User
}
image
在App.vue组件中的<script>标签中的export default 中定义userId变量
data(){
return {
userId:12345
}
}
在的模板中添加
<router-link :to='/user/+userId' replace tag="button">用户</router-link>
运行结果
image
路由懒加载
在index.js文件中把
import Home from '../components/Home.vue'
换成
const Home= ()=>import('../components/Home.vue')
就可以实现路由懒加载
image
子路由
1)在components目录下创建一个名为children的子目录，用来存放名为HomeMessage.vue和HomeNews.vue的子组件
HomeMessage.vue
<template>
<h2>这是HomeMessage组件</h2>
</template>
<script>
</script>
<style>
</style>
HomeNews.vue
<template>
<h2>这是HomeNews组件</h2>
</template>
<script>
</script>
<style>
</style>
2)打开index.js
2.1)导入子组件
const News= ()=>import('../components/children/HomeNews.vue')
const Message= ()=>import('../components/children/HomeMessage.vue')
2.2)在路由配置规则里给home路由配置子路由规则
children:[
{path:'',redirect:'news'},
{path:'news',component:News},
{path:'message',component:Message}
]
image
3）在Home.vue组件中添加展现路由的视图
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
image
运行结果
image
传递参数
路由传递参数的方式有两种，一种是上面说过的动态路由，现在来学习第二种方式
1）在components目录中新建Profile.vue组件
<template>
<div>
<h2>这是Profile组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
2）在index.js中导入组件并配置路由规则
const Profile = ()=>import('../components/Profile.vue')
{
path:'/profile',
component:Profile
}
3）在App.vue中添加代码
<router-link :to="{path:'/profile',query:{name:'jing',age:22}}" replace tag="button">档案</router-link>
4）再回到Profile.vue中添加接收路由传递过来的数据的代码
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
运行结果
image
导航守卫
我们现在用全局前置守卫来切换网页的title
image
在路由配置规则中给各个路由添加meta属性
meta:{
title:'首页'
}
image
然后使用 router.beforeEach 注册一个全局前置守卫
router.beforeEach((to,from,next) => {
document.title = to.matched[0].meta.title
next()
})
运行结果
image
修改配置
修改cli3创建的项目的配置有两种方式
1）在node_modules目录的如下目录中直接修改
image
image
2）在项目的根目录下创建一个名为vue.config.js的文件，这里进行简单的配置
module.exports = {
devServer:{
// 运行时自动打开浏览器
open:true
}
}
至此，本学习项目的最终目录结构如下
image
网友评论