1.什么是路由
(1)后端路由：對于普通的網(wǎng)站疗垛，所有的超鏈接都是URL地址症汹，所有的URL地址都對應(yīng)服務(wù)器上的資源；
(2)前端路由：對于單頁面應(yīng)用程序來說贷腕，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換背镇，同時，hash有一個特點泽裳；HTTP請求中不會包含hash相關(guān)的內(nèi)容瞒斩；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)诡壁；
(3)在單頁面應(yīng)用程序中济瓢，這種通過hash改變來切換頁面的方式，稱作前端路由(區(qū)別于后端路由)
2.vue-router的基本使用
<div id="app">
<a href="#/login">登錄</a>
<a href="#/register">注冊</a>
//這是vue-router提供的 元素妹卿，專門用來當(dāng)做占位符的旺矾，將來，路由規(guī)則夺克，匹配到的組件箕宙，就會展示到這個router-view中去，所以：我們可以吧router-view認(rèn)為是一個占位符
<router-view></router-view>
</div>
//組件的模板對象
var login={
template:'<h1>登錄組件</h1>'
}
var register={
template:'<h1>注冊組件</h1>'
}
//1.創(chuàng)建一個路由對象铺纽，當(dāng)導(dǎo)入vue-router包之后柬帕，在window全局對象中，就有了一個路由的構(gòu)造函數(shù)狡门，叫做VueRouter
//在new路由對象的時候陷寝，可以為構(gòu)造函數(shù)，傳遞一個配置對象
var routerObj = new VueRouter({
//router//這個配置對象中的router表示【路由匹配規(guī)則】的意思
routes:[//路由匹配規(guī)則
//每個路由規(guī)則凤跑，都是一個對象，這個規(guī)則對象褐奥，身上咖耘，有兩個必須的屬性：
屬性1：是path，表示監(jiān)聽撬码，哪個儿倒；路由鏈接地址；
屬性2：是component呜笑，表示义桂，如果路由是前面匹配到的path找筝，則表示component屬性對應(yīng)的那個組件
//注意：component的屬性值，必須是一個組建的模板對象曹抬，不能是組件的引用名稱
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routerObj//將路由規(guī)則對象溉瓶，注冊到vm實例上，來監(jiān)聽URL地址的變化谤民，然后展示對應(yīng)的組件
})
3.路由router-link的使用
<div id="app">
//router-link默認(rèn)渲染為一個a標(biāo)簽
<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.設(shè)置選中路由高亮的兩種方式
(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方式傳遞參數(shù)
<div id="app">
//如果在路由中触创，使用查詢字符串，給路由傳遞參數(shù)为牍，則不需要修改路由規(guī)則的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(){
//組件的生命周期鉤子函數(shù)
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方式傳遞路由參數(shù)
<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(){
//組件的生命周期鉤子函數(shù)
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屬性實現(xiàn)路由嵌套
<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:[
//子路由前面不要加/ 哼绑，否則永遠(yuǎn)以根路徑開始請求，這樣不方便用戶去理解URL地址
{path:'login',component:login},
{path:'register',component:register}
]},
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
9.使用命名視圖實現(xiàn)經(jīng)典布局
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頭部區(qū)域</h1>'
}
var leftBox = {
template:'<h1 class="left">left側(cè)邊欄區(qū)域</h1>'
}
var mainBox = {
template:'<h1 class="main">mainBox主體區(qū)域</h1>'
}
var router = new VueRouter({
routes:[
{path:'/',components:{
'default':header,//defult是默認(rèn)
'left':leftBox,
'main':mainBox
}},
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
//router:router
router
})
