路由
路由的最基本配置:
1.下载vue-router模块(我们搭建vue项目时 已经勾选下载 所以在这不需要重复下载)
2.在main.js 使用import语句 引入vue-router模块
3.让vue加载路由功能
Vue.use(VueRouter)
创建vue对象 配置路由
1.创建VueRouter对象 构造函数传入大括号 配置路由
2.VurRouter 常用的属性:
1.mode(路由模式): hash和history
hash:哈希模式(路径后面带/#/)
history 历史路径模式 (需要服务器环境配置
开发时不影响 一旦打包 如果失去了服务器配置环境 那么页面空白)
2.base: 基本路径
例如: 我们的vue路径是 www.myvue.com
加入 base:"itszt" 后
路径是:
www.myvue.com/itszt/
3.routes 配置路由路径的
值是一个数组 数组里面每一个路由 都是一对大括号
每一个路由对象 的配置:
path:"" //路径是什么
component:组件对象 //访问什么组件
name:"" //给当前组件起名字 (后面传参要用到)
4.把new出来的 配置好的 路由对象 绑定给vue对象
在Vue的大括号里面 定义属性名 router: new出来的那个VueRouter对象
5.把router-view这个标签 写到指定位置 让路由显示出来
<keep-alive>
<!--vue2.0提供了一个keep-alive组件,
用来缓存组件,避免多次加载相应的组件,减少性能消耗-->
<router-view/>
</keep-alive>
那么路由在回退时 不触发mounted钩子函数了
因为这个标签的作用就是让组件可以缓存
那么也就是不触发mounted 如果我们的数据是在mounted里面获取的
那么一旦回退 数据不重新获取了
那么怎么才能重新获取呢
跟keep-alive标签对应的钩子函数就是activated
import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"
import Student from "./components/Student"
import Teacher from "./components/Teacher"
Vue.use(VueRouter);
var myrouter=new VueRouter({
// mode:"hash" 默认
// base:"itszt"
routes:[
{
path:"/student",
component:Student
},
{
path:"/teacher",
component:Teacher
},
]
});
new Vue({
el: '#app',
//把路由对象注册进Vue
router:myrouter,
components: { App },
template: '<App/>'
})
* 在main.js里面直接做路由的配置 虽然效果是没问题的
* 但是代码结构太乱
* 我们要把路由的所有配置代码单独提出去 写成一个js文件
*
* 在js文件里面 把路由配置成功 new出来 router对象
*
* 最后 通过 export default router; 把配置好的对象对外暴露
*
* 在main.js里面通过 import语句 引入这个对外暴露的router对象
* 最后把router对象在Vue里面注册一下
maina.js文件代码
import Vue from 'vue'
import App from './App'
import router from "./router" //如果引入的是一个文件夹 则默认找index
//router跟el components属性名 一样是Vue规定好的
new Vue({
el: '#app',
//键和值一样
router,
components: { App },
template: '<App/>'
})
router/index.js文件代码
import Vue from 'vue'
import VueRouter from "vue-router"
Vue.use(VueRouter);
import Home from "../components/Home";
import Gwc from "../components/Gwc";
import User from "../components/User";
var router=new VueRouter({
mode:"history",
routes:[
//当前/路径 表示 页面加载时 默认访问首页 访问首页时 默认router-view展示哪个组件
{
path:"/",
component:Home
},
{
path:"/gwc",
component:Gwc
},
{
path:"/user",
component: User
}
]
})
//我们需要把创建出来的 router对象 导出 去 main.js才可以导入
export default router;
app.vue代码 用<router-view></router-view>展示组件
<template>
<div id="app">
<h1>我是app首页的导航</h1>
<ul id="nav">
<li><a href="/">首页</a></li>
<li><a href="/gwc">购物车</a></li>
<li><a href="/user">个人中心</a></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
控制路由跳转的方式
控制跳转路由的方式有很多
比如原生的 a标签 路径写上路由路径 则可以跳转
还有 js代码的 window.location="路由路径"
但是这些跳转 都是原生提供的
router路由模块里面两种对应的跳转方式:
1.静态标签跳转: router-link标签
router-link标签 必须有的属性 to属性
表示当前的路由跳转目标 如果没有就报错
router-link一旦加上to属性 那么默认解析成a标签
tag="li" 表示把 router-link标签解析成li标签
或者其他标签也可以 可以改成任意标签
如果想要给route-link标签绑定事件
vue提供了 给自定义组件标签绑定事件的方式:
@事件名称.native="驱动函数"
通过添加.native时间修饰符 能够给自定义组件绑定事件
<router-link @click.native="show" tag="div" to="/">首页</router-link>
<router-link @click.native="show" tag="div" to="/gwc">购物车</router-link>
<router-link @click.native="show" tag="div" to="/user">个人中心</router-link>
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query,地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query,地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params,地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
2.动态js代码跳转: this.$router.push("路由路径")
通过自己写标签 给标签添加点击事件 js代码的方法跳转路由
会记录历史记录的跳转方式
this.$router.push("路由路径") 就是js控制路由跳转
不会有历史记录的跳转方式
this.$router.replace("路由路径")
如果跳转到下一个路由用的是 replace方法 那么当前页面路由不会记录到历史记录中
//解决当前路由 再次点击跳转本路由时 报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
<template>
<div id="app">
<h1>我是App.vue主页</h1>
<!-- 静态标签的方式跳转路由-->
<!-- <router-link @click.native="show" tag="div" to="/">首页</router-link>
<router-link @click.native="show" tag="div" to="/gwc">购物车</router-link>
<router-link @click.native="show" tag="div" to="/user">个人中心</router-link>-->
<p>
<button @click="go1">首页</button>
<button @click="go2">购物车</button>
<button @click="go3">个人中心</button>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
show(){
alert("路由即将要跳转")
},
go1(){
this.$router.push("/")
},
go2(){
// this.$router.push("/gwc")
this.$router.replace("/gwc")
},
go3(){
this.$router.push("/user")
}
}
}
</script>
<style>
</style>
子路由的配置
子路由就是在当前路由下面 还有路由
例如:
当前路由是: /gwc
子路由可以是 /gwc/list1 /gwc/youhui /gwc/xiaoliang
子路由的配置步骤:
1.找到要配置子路由父路由对象
2.在父路由的对象里面 添加一个属性 children:[]
3.在children的中括号里面添加子路由对象进行配置
4.子路由对象也是path component name三个属性
5.配置完以后 要把router-view放到父路由的页面模板自己找个位置
main.js代码
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home"
import Gwc from "../components/Gwc"
import User from "../components/User"
//引入User路由的三个子路由对象
import Tuijian from "../components/User/Tuijian"
import Logout from "../components/User/Logout"
import Setting from "../components/User/Setting"
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{
path: '/',
component:Home
},
{
path: '/gwc',
component:Gwc
},
{
path: '/user',
component:User,
children:[
{
path:"/user/", //表示 跳转到/user时 user里面的router-view默认显示推荐这个子路由
component:Tuijian
},
{
path:"/user/logout",
component:Logout
},
{
path:"/user/setting",
component:Setting
}
]
},
]
})
子路由的父模块代码
<template>
<div>
<h2>个人中心</h2>
<ul>
<li @click="logout">注销登陆</li>
<li>修改密码</li>
<li @click="setting">帮助与设置</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods:{
logout(){
this.$router.push("/user/logout")
},
setting(){
this.$router.push("/user/setting")
}
}
}
</script>
<style scoped>
</style>
路由跳转之间的传参(包括父子路由)
有两种:
1.path+query方式传参
跳转时传参数:
this.$router.push({
path:"/路由路径",
query:{
//要传过去的键值对
键1:值1,
键2:值2
.
.
.
}
})
跳转过去后接受参数:
在目标路由的mounted方法里面 接受传过来的路由参数
this.$route.query 接受到传过来的键值对那个对象
通过 this.$route.query.键1 获取值
通过 this.$route.query.键2 获取值
.
.
.
path+query方式路由传参时 会在地址栏体现出参数的拼接
go2(){
// this.$router.push("/gwc")
//path+query的方式传参
this.$router.push({
path:"/gwc",
query:{
mobile:"13812345678",
userid:"10026"
}
})
}
export default {
name: "Gwc",
mounted(){
/*console.log("传过来的参数是:",this.$route.query);
console.log("传过来手机号是:",this.$route.query.mobile);
console.log("传过来用户号是:",this.$route.query.userid);*/
}
}
2.name+params方式传参
这种方式前提必须保证 路由配置时 已经添加了name属性
路由跳转时传参数
this.$router.push({
name:"路由配置时的name值",
params:{
//要传过去的键值对
键1:值1,
键2:值2
.
.
.
}
})
目标路由展现时 接收路由提交过来的参数:
this.$route.params 接受到传过来的键值对那个对象
通过 this.$route.params.键1 获取值
通过 this.$route.params.键2 获取值
.
.
.
* 这种方式传的参数 不在地址栏体现出来 所以一旦页面刷新
数据就会丢失 只有第一次跳转过来传的那一次能够接收到
go3(){
// this.$router.push("/user")
// 给user传路由参数
this.$router.push({
name:"User",
params:{
mobile:"13912345678",
userid:10086
}
})
}
mounted(){
console.log("传过来的参数是:",this.$route.params);
console.log("传过来手机号是:",this.$route.params.mobile);
console.log("传过来用户号是:",this.$route.params.userid);
if(this.$route.params.mobile){//如果有再赋值
// 给当前组件的data里面的一个变量赋值
this.mobile=this.$route.params.mobile;
}
}
动态路由
{
// path: '/gwc', //这个是固定路由 也就是 跳转时 只能匹配/gwc
//如果我的需求是 /gwc/10006 是小强的购物车
// /gwc/10007 是小白的购物车 等等等
// 那么此时我们需要配置动态路由
path:"/gwc/:id", //这个:id是自己随便起的名字 表示声明一个id变量 以后所有的/gwc/随便 的路由都能跳转到购物车页面
name:"Gwc",
component:Gwc
}
本地mock数据搭建
1.打开cmd全局安装json-server
输入命令 cnpm/npm install json-server -g
2.找到自己要mock的json文件 复制到一个单独文件夹
用cmd切换到json文件所在的目录
3.输入命令 json-server 文件名.json --port 自己想一个端口 -h自己电脑ip
-h可以不写 默认以localhost启动
active-class
-
类型:
string
-
默认值:
"router-link-active"
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项
linkActiveClass
来全局配置。<ul> <router-link replace :to='{name:v.path}' tag="li" v-for="(v,i) in products" :key="i" active-class="haha" @click.native="show(i)" >{{v.name}}</router-link> </ul>
.left_inner li.haha, .left_inner li:hover { background: #4fc08d; color: #fff; }
路由重定向
//访问/detail时 自动重定向去访问analysis子路由
redirect:"analysis",
路由懒加载
{
path: '/',
name: 'Home',
//这是正常引入一个vue的写法 如果当前vue是需要 跳转时 才激活 才加载 就要换成下面的写法
component: Home
//此处是路由懒加载的写法
//component: () => import( 'vue文件所在的路径 从当前文件出发 路径别写错了')
}