1.什么是路由
(1)后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源；
(2)前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点；HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
(3)在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由(区别于后端路由)
2.vue-router的基本使用
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
//这是vue-router提供的 元素，专门用来当做占位符的，将来，路由规则，匹配到的组件，就会展示到这个router-view中去，所以：我们可以吧router-view认为是一个占位符
<router-view></router-view>
</div>
//组件的模板对象
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
//1.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数，传递一个配置对象
var routerObj = new VueRouter({
//router//这个配置对象中的router表示【路由匹配规则】的意思
routes:[//路由匹配规则
//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
属性1：是path，表示监听，哪个；路由链接地址；
属性2：是component，表示，如果路由是前面匹配到的path，则表示component属性对应的那个组件
//注意：component的属性值，必须是一个组建的模板对象，不能是组件的引用名称
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routerObj//将路由规则对象，注册到vm实例上，来监听URL地址的变化，然后展示对应的组件
})
3.路由router-link的使用
<div id="app">
//router-link默认渲染为一个a标签
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes:[
//{path:'/',component:login}
{path:'/',redirect:'/login'}//这里的redirect和Node中的redirect完全是两码事
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routerObj
})
4.设置选中路由高亮的两种方式
(1)直接改路由样式.router-link-active{
color:red;
font-weight:800;
}
(2)改成自己的名称.myactive:{
color:red;
font-weight:800;
}
var routerObj = new VueRouter({
routes:[
//{path:'/',component:login}
{path:'/',redirect:'/login'}//这里的redirect和Node中的redirect完全是两码事
{path:'/login',component:login},
{path:'/register',component:register}
],
linkAtiveClass:'myactive'
})
5.为路由切换启动动画
.v-enter,.v-leave-to{
opacity:0;
transform:translateX(140px);
}
.v-enter-active,.v-leave-active{
transition:all 0.5s ease;
}
<transition mode="out-in">
<router-view></router-view>
</transition>
6.路由传参-使用query方式传递参数
<div id="app">
//如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性
<router-link to="/login?id=10&name=zs" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view><router-view>
</div>
var login={
template:'<h1>登录组件---{{$route.query.id}}---{{$route.query.name}}</h1>',
data(){
return{
msg:123
}
}
created(){
//组件的生命周期钩子函数
console.log(this.$route.query.id)
}
}
var register={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
7.使用params方式传递路由参数
<div id="app">
<router-link to="/login/12/zs" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view><router-view>
</div>
var login={
template:'<h1>登录组件---{{$route.params.id}}---{{$route.params.name}}</h1>',
data(){
return{
msg:123
}
}
created(){
//组件的生命周期钩子函数
console.log(this.$route.params.id)
}
}
var register={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes:[
{path:'/login/:id/:name',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
8.使用children属性实现路由嵌套
<div id="app">
<router-link to="/account">Account</router-link>
<router-view><router-view>
</div>
<template id="tmp1">
<div>
<h1>这是Account组件</h1>
<router-link to="/account/login" tag="span">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view><router-view>
</div>
</template>
var account = {
template:"#tmp1"
}
var router = new VueRouter({
routes:[
{path:'/account',component:account,children:[
//子路由前面不要加/ ，否则永远以根路径开始请求，这样不方便用户去理解URL地址
{path:'login',component:login},
{path:'register',component:register}
]},
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
9.使用命名视图实现经典布局
html,body{
margin:0;
padding:0;
}
.header{
background-color:orange;
height:80px;
}
h1{
margin:0;
padding:0;
font-size:16px;
}
.container{
display:flex;
height:600px;
}
.left{
background-color:red;
flex:2;
}
.main{
background-color:pink;
flex:8;
}
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
var header = {
template:'<h1 class="header">header头部区域</h1>'
}
var leftBox = {
template:'<h1 class="left">left侧边栏区域</h1>'
}
var mainBox = {
template:'<h1 class="main">mainBox主体区域</h1>'
}
var router = new VueRouter({
routes:[
{path:'/',components:{
'default':header,//defult是默认
'left':leftBox,
'main':mainBox
}},
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
网友评论