Vue -路由
后端路由，網(wǎng)站的所有超鏈接都是URL地址，所有URL地址都對應(yīng)服務(wù)器資源
前端路由，對于單頁面程序來說，主要通過URL中的hash（#）來實(shí)現(xiàn)不同頁面之間的切換，同時(shí)hash有個(gè)特點(diǎn)，HTTP請求中不會包含hash相關(guān)的內(nèi)容，所以單頁面程序中的頁面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)，像a鏈接的錨點(diǎn)就是hash
在單頁面程序中，這種通過hash改變來切換頁面的方式，稱為前端路由
Vue構(gòu)造單頁面應(yīng)用需要使用Vue Router，它是Vue官方的路由管理器，和Vue核心深度集成，使用前要導(dǎo)包vue-router
基本應(yīng)用，示例
<body> <div id="app"><a href="#/login">登錄</a><a href="#/register">注冊</a><!--vue-router提供的元素,專門用來當(dāng)作占位符,將來路由規(guī)則匹配到的組件會展示到這里--><router-view></router-view> </div><script>//組件的模版對象var login = {template: '<h3>登錄界面</h3>'}var register = {template: '<h3>注冊界面</h3>'}//創(chuàng)建一個(gè)路由對象,為構(gòu)造參數(shù)傳遞一個(gè)配置對象var vueRouter = new VueRouter({//配置對象中的routes是路由匹配規(guī)則,每個(gè)路由規(guī)則都是一個(gè)對象 routes: [{path: '/login', component: login},{path: '/register', component: register}]})var vm = new Vue({el: '#app',//通過router屬性注入路由對象,使整個(gè)應(yīng)用都路由功能 router: vueRouter}) </script> </body>導(dǎo)入vue-router包后，在window全局對象中，就有了一個(gè)路由的構(gòu)造函數(shù)，叫VueRouter，在new路由對象時(shí)可為構(gòu)造函數(shù)傳遞一個(gè)配置對象
配置對象中routes為路由規(guī)則數(shù)組，每個(gè)路由規(guī)則都是一個(gè)對象，這個(gè)對象有兩個(gè)必須的屬性：
屬性1 path，表示監(jiān)聽哪個(gè)路由的鏈接地址
屬性2 component，表示如果路由是前面匹配到的path ，則展示component屬性對應(yīng)的那個(gè)組件
注意： component 的屬性值，必須是一個(gè)組件的模板對象
過程一覽：使用Vue?Router后請求地址會被加上#，點(diǎn)擊a標(biāo)簽，URL地址會被修改，修改后的地址將被Vue實(shí)例上的路由對象監(jiān)聽到，然后進(jìn)行路由規(guī)則的匹配，匹配上了就展示對應(yīng)的組件，展示區(qū)域就是<router-view>
?
可用router-link標(biāo)簽來取代a標(biāo)簽，這樣就可以省略#的書寫，router-link在頁面上默認(rèn)會被渲染為一個(gè)a標(biāo)簽
即使通過tag屬性變成了其他標(biāo)簽，但依舊可以點(diǎn)擊
<router-link to="/login">登錄</router-link>?
重定向到某個(gè)組件，如匹配到根路徑時(shí)重定向到登錄頁面，這里的redirect和后端的redirect不同，后端的redirect是服務(wù)器實(shí)現(xiàn)的302重定向，而這里的重定向應(yīng)該只是組件的切換
{path:'/',redirect:'/login'}?
設(shè)置選中路由高亮，被點(diǎn)擊的router-link標(biāo)簽會被添加兩個(gè)類，可以對router-link-active添加樣式
如果想修改這個(gè)類的名字，可以通過路由的構(gòu)造選項(xiàng)?linkActiveClass?來全局配置，甚至可以改成bootstrap的類
?
為路由切換添加動(dòng)畫
將<router-view>標(biāo)簽用<transition>包裹，之后一切按老套路設(shè)置
?
路由傳參
query方式傳遞給路由參數(shù)，如果在路由中使用查詢字符串（也就是問號傳參方式）給路由傳參，則不需要修改路由規(guī)則的path屬性，照樣能匹配上
組件實(shí)例會有個(gè)$route屬性，是個(gè)對象，對象中有query對象，存放的就是查詢字符數(shù)據(jù)
<div id="app"><router-link to="/login?id=10&name=Sam">登錄</router-link><router-link to="/register">注冊</router-link><router-view></router-view> </div><script> //組件的模版對象 var login = {//this可以省略,就像使用組件data數(shù)據(jù)時(shí)可直接調(diào)用屬性名 template: '<h3>登錄界面,這是查詢字符串的數(shù)據(jù)：{{this.$route.query}}</h3>',created() { //組件生命周期鉤子 console.log(this.$route)} }
?
params方式傳參
如果匹配規(guī)則是占位符形式
var vueRouter = new VueRouter({routes: [{path: '/login/:id/:name', component: login},{path: '/register', component: register}] })?那傳參就要以這種方式，并且匹配多少個(gè)參數(shù)就要傳多少個(gè)，否則匹配不上
<router-link to="/login/18/Sam">登錄</router-link>此時(shí)傳來的數(shù)據(jù)不在query中，而在params中
所以獲取數(shù)據(jù)時(shí)只需要this.$route.params即可
?
路由嵌套
使用children屬性實(shí)現(xiàn)子路由，不使用children則小組件顯示時(shí)大組件會消失，并且地址欄是直接顯示/login而不是/index/login
<body> <div id="app"><router-view></router-view><!--大組件渲染的地方--> </div> <template id="templ"><div><h1>++++++Index++++++</h1><router-link to="/index/login">登錄</router-link><router-link to="/index/register">注冊</router-link><router-view></router-view><!--小組件渲染地方--></div> </template><script>//index為大組件,里面有兩個(gè)小組件login和registervar index = {template: '#templ'}var login = {template: '<h3>登錄界面</h3>',}var register = {template: '<h3>注冊界面</h3>'}//創(chuàng)建一個(gè)路由對象var vueRouter = new VueRouter({routes: [{path: '/index',component: index,//子路由的path前面不要帶 / ,否則永遠(yuǎn)以根路徑開始請求 children: [{path: 'login', component: login},{path: 'register', component: register}]}]})var vm = new Vue({el: '#app',router: vueRouter}) </script> </body>?
?
命名視圖實(shí)現(xiàn)經(jīng)典布局
有時(shí)候想同時(shí)同級展示多個(gè)組件，而不是嵌套展示，這時(shí)候命名視圖就派上用場
可以在界面中擁有多個(gè)單獨(dú)命名的組件，而不是只有一個(gè)單獨(dú)的出口，如果?router-view?沒有設(shè)置名字，那么默認(rèn)為?default
結(jié)構(gòu)構(gòu)建好后再加上樣式
轉(zhuǎn)載于:https://www.cnblogs.com/Grani/p/9643979.html
總結(jié)
- 上一篇： C++之纯虚函数
- 下一篇： ubuntu 16.04安装visual