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