vue-router前端路由
vue 路由的懒加载
{
path:"Order",
component:()=>import("../views/Order.vue"),
name:"Order",
meta:{
//这里可以携带一些第三方信息
index:1
}
},
这样直接组件中加载的路由是不需要在加载首页的时候就开始加载，当你跳转到某个路由的时候才开始加载，一般除了首页跟数据比较多的页面建议使用这种写法
首页路由加载写法
直接在头部import 导入就行
vue-router是一个前端路由，他可以根据路由地址来动态的显示某些组件
首先使用vue-router.js
router:{
//初始化路由
routes:new VueRouter([
{
path:"/路径" //此处路径要加‘/’,
component:组件名，
name：路径名
},{
path:"/"
redirect:{
name:"路由名" //此处输入/自动跳转某个路由
}
}
])
components:{
//在使用路由调用组件可以不用注册
}
}
写好路由后，要在想显示的地方加个
<router-view />,在创建vue对象的时候，向内部配置一个属性router,这个属性后面初始化了一个路由对象new VueRouter()内部是一个配置对象
注意，如果路由配置好了以后，
vue-router会根据路由地址来动态显示组件，但是一定要在页面上的某个地方添加<router-view />来显示你的组件，否则无效
路由之间的跳转
路由跳转的方式两种
1.通过
<router-link>标签去跳转，
2.通过API方式去跳转
<router-link>跳转路由
<router-link :to="{name:'register'}">我要去注册页面看地下</router-link>
router-link默认会帮我们生成一个a标签，并且href地址也会帮我们生成好！上面的代码会生成下面的代码
<a href="#/register" class="">我要去注册页面看地下</a>
如果我们希望它按照指定的标签去生成，这个时候我们可以使用tag属性来完成
<router-link :to="{name:'register'}" tag="div">我要去注册页面看地下</router-link>
API跳转路由
只要是在Vue的创建的时候加载了router属性配置了VueRouter的，这个时候在任何子级当中都可以获取到这个router属性
this.$router.push({
name:"register"
});
上面的$router是路由管理对象，它对整个单页面程序的路由进行管理，它是栈的形式进行管理，所以上面的push操作相当于入栈操作，把一个新的路由地址推入到页面栈中
如果想返回之前的页面，我们就要执行当前页面的出栈操作
this.$router.back();
同时还有一种跳转页面方式是replace
this.$router.replace({
name:"register"
}); //这种跳转方式是使用在敏感数据页面跳转
这一种跳转页面的方式是直接替换，它当前的页面栈的中的这个页拿出来，再推入一个新的页面，像一般的敏感数据会使用这一种方式（登陆，扫码提交等）
路由页面的传值
路由传值的方式有两种，第一种是Query传值，第二种是prams传值
Query传值
在第一个页面
toRegister(){
this.$router.push({
name:"register",
query:{
userName:"biaogege",
age:18
}
});
}
第二个页面
created(){
console.log(this.$route.query);
}
<router-link>也可以使用query来进行传值
<router-link :to="{name:'register',query:{age:22}}" >我要去注册页面看地下</router-link>
params传值
这一种传值方式请同学们把它理解成我们之前所学习的express中的路径变量传值
第一个页面
this.$router.push({
name:"register",
params:{
userName:"biaogege",
age:34
}
});
第二个页面
created(){
//当前的路由对象
console.log(this.$route.params);
},
同时这里要注意，因为是路径变量，所以我们要在地址上面写上这个路径变量的名称
new Vue({
el:"#app",
router:new VueRouter({
routes:[
{
path:"/register/:userName/:age", //这里一定要写上路径变量的名称
component:register,
name:"register"
}
]
})
})
这一种传值方式也可以使用<router-link>来进行，如下
<router-link :to="{name:'register',params:{userName:'biaogege',age:34}}" >我要去注册页面看地下</router-link>
嵌套路由
<body>
<div id="app">
<router-view></router-view>
</div>
<template id="temp1">
<div class="login-box">
<h2>登陆页面</h2>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<button type="button" @click="$router.replace({name:'adminIndex'})">登陆</button>
</div>
</template>
<template id="temp2">
<div class="admin-box">
<div class="header">欢迎登陆小米管理系统后台</div>
<div class="left-menu">
<router-link :to="{name:'addStuInfo'}">新增学生</router-link>
<router-link :to="{name:'stuInfoList'}">学生列表</router-link>
</div>
<div class="right-content">
<router-view></router-view>
</div>
</div>
</template>
<template id="temp3">
<div>
<h2>新增学生的页面</h2>
<p>
<input type="text" placeholder="请输入学号">
</p>
<p>
<input type="text" placeholder="请输入姓名">
</p>
<p>
<button type="button">提交数据</button>
</p>
</div>
</template>
<template id="temp4">
<div>
<h2>学生列表</h2>
<table border="1" width="100%">
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr><td>H20010001</td><td>张三</td></tr>
<tr><td>H20010002</td><td>张三2</td></tr>
<tr><td>H20010003</td><td>张三3</td></tr>
<tr><td>H20010004</td><td>张三4</td></tr>
<tr><td>H20010005</td><td>张三5</td></tr>
</table>
</div>
</template>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/vue-router.min.js"></script>
<script>
var login = {
template: "#temp1"
};
var adminIndex = {
template: "#temp2"
};
var addStuInfo = {
template:"#temp3"
};
var stuInfoList = {
template:"#temp4"
};
new Vue({
el: "#app",
router: new VueRouter({
routes: [{
path: "/",
redirect: {
name: "login"
}
}, {
path: "/login",
component: login,
name: "login"
}, {
path: "/adminIndex",
component: adminIndex,
name: "adminIndex",
//子路由，也叫嵌套路由
children:[
{
path:"addStuInfo",
component:addStuInfo,
name:"addStuInfo"
},{
path:"stuInfoList",
component:stuInfoList,
name:"stuInfoList"
}
]
}]
})
});
</script>
上面的是三栏式布面的布局的二级路由嵌套
下面的代码演示一下常见APP中的tab-bar这种形式的路由嵌套
<body>
<div id="app">
<router-view />
</div>
<template id="temp0">
<div style="height: 100%;display: flex;flex-direction: column;">
<div class="content-box">
<router-view />
</div>
<ul class="tab-bar">
<router-link tag="li" :to="{name:'movie'}" active-class="active">
<span class="iconfont icon-dianying"></span>
影片
</router-link>
<router-link tag="li" :to="{name:'cinema'}" active-class="active">
<span class="iconfont icon-yingyuana"></span>
影院
</router-link>
<router-link tag="li" :to="{name:'boxOffice'}" active-class="active">
<span class="iconfont icon-ranking"></span>
票房
</router-link>
<router-link tag="li" :to="{name:'myInfo'}" active-class="active">
<span class="iconfont icon-My"></span>
我的
</router-link>
</ul>
</div>
</template>
<template id="temp1">
<div>
<h2>这是里影片的信息页</h2>
<button type="button" @click="$router.push({name:'detail'});">去某一个电影的详细信息页面</button>
</div>
</template>
<template id="temp2">
<div>
<h2>这是里影院的信息页面</h2>
</div>
</template>
<template id="temp3">
<div>
<h2>这是里票房的信息页面</h2>
</div>
</template>
<template id="temp4">
<div>
<h2>这是里我的信息页面</h2>
</div>
</template>
<template id="temp5">
<div>
<h1>这是某个电影的详细信息页面</h1>
</div>
</template>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/vue-router.min.js"></script>
<script>
var indexPage = {
template: "#temp0"
}
var moviePage = {
template: "#temp1"
};
var cinemaPage = {
template: "#temp2"
};
var boxOfficePage = {
template: "#temp3"
};
var myInfoPage = {
template: "#temp4"
}
var detailPage = {
template:"#temp5"
}
new Vue({
el: "#app",
router: new VueRouter({
routes: [{
path: "/index",
component: indexPage,
name: "index",
children:[
{
path:"movie",
component:moviePage,
name:"movie"
},{
path:"cinema",
component:cinemaPage,
name:"cinema"
},{
path:"boxOffice",
component:boxOfficePage,
name:"boxOffice"
},{
path:"myInfo",
component:myInfoPage,
name:"myInfo"
}
]
},{
path:"/detail",
component:detailPage,
name:"detail"
}]
})
})
</script>