VueRouter -- 使用 · Vue&&TypeSprict--基礎總結

>[success] # VueRouter -- 使用 ~~~ 1.首先引入VueRouter 的js文件，這個文件要在vue.js 下面 2.創建VueRouter對象，在對象中用routes進行規則配置 3.規則中，屬性1 是 path，表示監聽哪個路由鏈接地址；屬性2 是 component，表示，和path對應的組件 4.component 的屬性值，必須是一個組件的模板對象，不能是組件的引用名稱 // 創建一個路由對象 var routerObj = new VueRouter({ routes: [ // { path: '/', component: login }, { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register', component: register } ] }) ~~~ >[danger] ##### 關于redirect -- 解釋 ~~~ 1.建議將頁面路由匹配規則第一項用redirect，因為用戶習慣輸入根目錄，而不會習慣，使用前端這種哈希路由的方式輸入'#',這樣用戶輸入根目錄后這樣可以直接跳轉對應想展示的組件 ~~~ >[danger] ##### 使用步驟 ~~~ 1.導入路由的js 文件 2.創建路由對象 3.在路由對象中創建好路由和路徑的對應關系 4.在vue實例中綁定路由對象 5.在頁面使用時候用'router-link' 做鏈接跳轉 6.聲明'router-view' router-view會根據router-link 組件的連接進行展示對應組件 ~~~ >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login" tag="span">登錄</router-link> <router-link to="/register" tag="span">注冊</router-link> <router-view></router-view> </div> <template id="login"> <div>登陸頁</div> </template> <template id="register"> <div>注冊頁</div> </template> <script type="text/javascript"> let login = { template:'#login' }; let register = { template:'#register' }; router = new VueRouter({ routes:[ {path:'/', redirect:'/login'}, {path:'/login', component:login}, {path:'/register', component:register}, ] }) var vm = new Vue({ el: "#app", router, // components: { // login, // register, // }, }) </script> </body> </html> ~~~ >[danger] ##### 官網的案例 -- 更加抽離的代碼結構 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/foo">Go To Foo</router-link> <router-link to="/bar">Go To Bar</router-link> <router-view></router-view> </div> <script type="text/javascript"> let Foo = {template:'<div>foo</div>'}; let Bar = {template:'<div>bar</div>'}; const routes=[ {path:"/foo", component:Foo}, {path:"/bar", component:Bar}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~