**vue-router** [[vue官方網站 vue-router]](https://router.vuejs.org/) Vue Router is the official router for [Vue.js](http://vuejs.org/). It deeply integrates with Vue.js core to make building `Single Page Applications` with Vue.js a breeze. Features include: * Nested route/view mapping * Modular, component-based router configuration * Route params, query, wildcards * View transition effects powered by Vue.js' transition system * Fine-grained navigation control * Links with automatic active CSS classes * HTML5 history mode or hash mode, with auto-fallback in IE9 * Customizable Scroll Behavior Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. ---- **目錄內容** [TOC] ---- ## Installation ### Direct Download / CDN [Unpkg.com](https://unpkg.com/) provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. Include `vue-router` after Vue and it will install itself automatically: ~~~html <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script> ~~~ ### npm ~~~shell $ npm install vue-router ~~~ When used with a module system, you must explicitly install the router via`Vue.use()`: ~~~javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ~~~ You don't need to do this when using global script tags. ### Dev Build You will have to clone directly from GitHub and build`vue-router`yourself if you want to use the latest dev build. ~~~shell $ git clone https://github.com/vuejs/vue-router.git node_modules/vue-router $ cd node_modules/vue-router $ npm install $ npm run build ~~~ ## A basic example * HTML ~~~html <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- use router-link component for navigation. --> <!-- specify the link by passing the `to` prop. --> <!-- `<router-link>` will be rendered as an `<a>` tag by default --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- route outlet --> <!-- component matched by the route will render here --> <router-view></router-view> </div> ~~~ * JavaScript ~~~javascript // 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter // and then call `Vue.use(VueRouter)`. // 1. Define route components. // These can be imported from other files const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. Define some routes // Each route should map to a component. The "component" can // either be an actual component constructor created via // `Vue.extend()`, or just a component options object. // We'll talk about nested routes later. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. Create the router instance and pass the `routes` option // You can pass in additional options here, but let's // keep it simple for now. const router = new VueRouter({ routes // short for `routes: routes` }) // 4. Create and mount the root instance. // Make sure to inject the router with the router option to make the // whole app router-aware. const app = new Vue({ router }).$mount('#app') // Now the app has started! ~~~ By injecting the router, we get access to it as`this.$router`as well as the current route as`this.$route`inside of any component: ~~~javascript // Home.vue export default { computed: { username() { // We will see what `params` is shortly return this.$route.params.username } }, methods: { goBack() { window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') } } } ~~~ Throughout the docs, we will often use the`router`instance. Keep in mind that `this.$router` is exactly the same as using `router`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing. Notice that a `<router-link>` automatically gets the `.router-link-active` class when its target route is matched. You can learn more about it in its [API reference](https://router.vuejs.org/api/#router-link). You can also check out this example[live](https://jsfiddle.net/yyx990803/xgrjzsup/). ## Vue 頁面跳轉方式 與 參數傳遞 編程導航 [[參考文檔]](https://blog.csdn.net/muguli2008/article/details/102789504) ### 標簽跳轉：`<router-link>`映射路由 1、不帶參數跳轉 ~~~html <!-- home頁面（首頁） --> <template> <!-- 在Vue中的<router-link>標簽中，到頁面最終還是轉為<a>標簽 --> <router-link to="/about"> <button>打開關于我們 - 不帶參數1</button> </router-link> <router-link :to="{path: '/about'}"> <button>打開關于我們 - 不帶參數2</button> </router-link> </template> ~~~ 2、帶參數跳轉 ~~~html <!-- home頁面（首頁） --> <template> <router-link :to="{path: '/about', query: {id: 1024, name:'mupiao', age: 28 }}"> <button>打開關于我們 - 帶參數1</button> </router-link> <router-link :to="{name: 'About', params: {id: 1024, name:'mupiao', age: 28 }}"> <button>打開關于我們 - 帶參數2</button> </router-link> </template> ~~~ 3、接收參數 ~~~ // About頁面（關于我們） <template> <section>關于我們</section> </template> <script> export default { name: "About", data() { return {}; }, created() { // 在Vue實例被創建之后的鉤子函數中，接收home頁面傳過來的參數 // 以query方式接收參數：【query傳遞數據是通過URL傳遞的，類似ajax中的get方式】 console.log(this.$route.query.id); // 1014 console.log(this.$route.query.name); // mupiao console.log(this.$route.query.age); // 28 // 以params方式接收參數：【params方式，類似ajax中的post方式】 console.log(this.$route.params.id); // 1014 console.log(this.$route.params.name); // mupiao console.log(this.$route.params.age); // 28 } } </script> ~~~ **顯示子路由視圖一定要加上`<router-view></router-view>`** ~~~ // Main主框架頁面 <template> <Layout> <Header></Header> <Content> <!-- 顯示子路由視圖 --> <router-view></router-view> </Content> <Footer></Footer> </Layout> </template> <script> import Header from "@/components/Header.vue"; import Footer from "@/components/Footer.vue"; export default { name: "Main", components: { Header, Footer }, data() { return {}; }, mounted() {}, methods: {} }; </script> <style lang="scss" scoped> .ivu-layout { .ivu-layout-content { min-height: 88vh; } } </style> ~~~ ### 編程式路由跳轉： `this.$router` `this.$router.push()`：跳轉到指定url路徑，并向`history`棧中添加一個記錄，點擊后退會返回到上一個頁面。 `this.$router.replace()` ：跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)。 `this.$router.go(n) ()`：向前或者向后跳轉n個頁面，n可為正整數或負整數。 1、不帶參數跳轉 ~~~ <!-- Home頁面（首頁） --> <template> <router-link :to="{path: '/about'}"> <button>打開關于我們</button> </router-link> <button @click="open">打開關于我們</button> </template> <script> export default { name: "Home", data() { return {}; }, methods: { open() { this.$router.push('/about'); } }, } </script> ~~~ 2、帶參數跳轉 ~~~ <!-- Home頁面（首頁） --> <template> <router-link :to="{path: '/about'}"> <button>打開關于我們</button> </router-link> <button @click="open1">打開關于我們 - query方式</button> <button @click="open2">打開關于我們 - params方式</button> </template> <script> export default { name: "Home", data() { return {}; }, methods: { // query方式，與path搭配使用，而params 會被忽略， // 帶查詢參數，變成 /about?id=2048&book=了不起的Node.js&job=Web前端 open1() { this.$router.push({ path: '/about', query: { id: 2048, book: "了不起的Node.js", job: "Web前端" } }); }, //??注：如果要傳遞的參數很長時，請用params方式， //因為query方式是通過URL傳遞的，而URL傳參數長度是有限制的哦！！ // params方式，與name搭配使用 open2() { this.$router.push({ name: "About", // ??注：這里不能用path路徑，只能用name【請對照router.js中的路由規則中的name項，還有就是一般首字母大寫】，否則取不到傳過去的數據 params: { id: 2048, book: "了不起的Node.js", job: "Web前端" } }); } }, } </script> ~~~ 3、接收參數 ~~~ // About頁面（關于我們） <template> <section>關于我們</section> </template> <script> export default { name: "About", data() { return {}; }, created() { // 在Vue實例被創建之后的鉤子函數中，接收home頁面傳過來的參數 //??注：在傳遞參數時，用什么方式傳參，就用什么方式接收！！ // 以query方式接收參數：【query傳遞數據是通過URL傳遞的，類似ajax中的get方式】 console.log(this.$route.query.id); // 2048 console.log(this.$route.query.book); // 了不起的Node.js console.log(this.$route.query.job); // Web前端 // 以params方式接收參數：【params方式，類似ajax中的post方式】 console.log(this.$route.params.id); // 2048 console.log(this.$route.params.book); // 了不起的Node.js console.log(this.$route.params.job); // Web前端 // this.$route 路由信息對象 console.log(this.$route); //this.$route 對象中包涵了路由的相關信息，請自看！！ </script> ? ~~~ 簡單總結 ~~~javascript //1. 不帶參數 this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) //2. query傳參 this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) // html 取參 $route.query.id // script 取參 this.$route.query.id //3. params傳參 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name // 路由配置 path: "/home/:id" 或者 path: "/home:id" , // 不配置path ,第一次可請求,刷新頁面id會消失 // 配置path,刷新頁面id會保留 // html 取參 $route.params.id // script 取參 this.$route.params.id ~~~ ### 獲取路由上的參數：`this.$route` >[warning]獲取路由上面的參數，用的是`$route`，后面沒有r `query`和`params`區別 `query`類似`get`, 跳轉之后頁面 url后面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params。刷新頁面id還在 。 `params`類似`post`, 跳轉之后頁面 url后面不會拼接參數 , 但是刷新頁面id 會消失 params是路由的一部分,必須要有。query是拼接在url后面的參數，沒有也沒關系。 params一旦設置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。 params、query不設置也可以傳參，但是params不設置的時候，刷新頁面或者返回參數會丟失， 兩者都可以傳遞參數，區別是什么？ query 傳參配置的是path，而params傳參配置的是name，在params中配置path無效 query在路由配置不需要設置參數，而params必須設置 query傳遞的參數會顯示在地址欄中 params傳參刷新會無效，但是query會保存傳遞過來的值，刷新不變 ### 瀏覽器跳轉 ~~~javascript //HTML標簽打開外部鏈接 <a target="_blank" href="https://www.baidu.com/s?wd=Vue">百度一下 Vue</a> //在當前頁面打開URL頁面 window.location.href = "https://www.baidu.com/s?wd=Vue"; //打開一個新的瀏覽器窗口 window.open("https://www.baidu.com/s?wd=Vue", "_blank", "width=1000, height=500", true); ~~~ ## Vue常用路由規則配置 ~~~javascript import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main.vue' // 抽離出在這個路由配置表中共用的頁面視圖，以方便多處使用 const Login = () => import(/* webpackChunkName: "Login" */ '../views/Login.vue'); const News = () => import(/* webpackChunkName: "News" */ '../views/News.vue'); const NotFound = () => import(/* webpackChunkName: "NotFound" */ '../views/NotFound.vue'); Vue.use(VueRouter); const routes = [ { path: '/', // 網站首頁 name: 'Home', component: () => import('../views/Home.vue') }, { path: '/login', name: 'Login', component: Login }, { path: '/regist', name: 'Regist', component: () => import('../views/Regist.vue') }, { path: '/main', name: 'Main', meta: { userauth: true // 開啟用戶鑒權（用戶需登錄后，才能訪問） }, component: Main, children: [ // 子路由 { path: '/news/:id(\\d+)', name: 'News', meta: { userauth: true }, component: News, children: [ // 第三級子路由 { path: '/main/news/alert', name: 'Alert', component: () => import('../views/Alert.vue') }, { path: '/card/:listId(\\d+)/list/:listId(\\d+)', name: 'Card', component: () => import('../views/Card.vue') } ] }, { path: '/info/:id(\\d+)', name: 'Info', meta: { userauth: true }, component: () => import(/* webpackChunkName: "Info" */ '../views/Info.vue') }, { path: '/send', name: 'Send', meta: { userauth: true }, component: () => import('../views/Send.vue') }, // 默認顯示的子路由 { path: '', name: 'News', component: News } ], }, { path: '/about', name: 'About', meta: { userauth: true }, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/notfound', name: 'NotFound', component: NotFound }, // 如果找不到對應的路由(頁面)就顯示404頁面 { path: '*', name: 'NotFound', component: NotFound } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); router.beforeEach((to, from, next) => { // 在進入路由前，判斷到該路由需要鑒權（用戶登錄）則驗證用戶信息(!Store.state.user.userinfo 沒有用戶信息)，不通過則跳轉到登錄頁。 if (to.matched.some(matched => matched.meta.userauth) && !Store.state.user.userinfo) { next({ name: 'Login' }); } else { next(); } }); export default router; ~~~ ## Navigation Guards [[官方文檔]](https://router.vuejs.org/guide/advanced/navigation-guards.html) ### Global Before Guards ### Global Resolve Guards ### Global After Hooks ### Per-Route Guard ### In-Component Guards you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options: * `beforeRouteEnter` * `beforeRouteUpdate` * `beforeRouteLeave` ~~~javascript const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // called before the route that renders this component is confirmed. // does NOT have access to `this` component instance, // because it has not been created yet when this guard is called! }, beforeRouteUpdate (to, from, next) { // called when the route that renders this component has changed, // but this component is reused in the new route. // For example, for a route with dynamic params `/foo/:id`, when we // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance // will be reused, and this hook will be called when that happens. // has access to `this` component instance. }, beforeRouteLeave (to, from, next) { // called when the route that renders this component is about to // be navigated away from. // has access to `this` component instance. } } ~~~ ### The Full Navigation Resolution Flow 1. Navigation triggered. 2. Call`beforeRouteLeave`guards in deactivated components. 3. Call global`beforeEach`guards. 4. Call`beforeRouteUpdate`guards in reused components. 5. Call`beforeEnter`in route configs. 6. Resolve async route components. 7. Call`beforeRouteEnter`in activated components. 8. Call global`beforeResolve`guards. 9. Navigation confirmed. 10. Call global`afterEach`hooks. 11. DOM updates triggered. 12. Call callbacks passed to`next`in`beforeRouteEnter`guards with instantiated instances. ### 示例 [[出處]](https://www.cnblogs.com/coolzone/p/9420840.html) 功能要求： 1. 列舉需要判斷登錄狀態的“路由集合”，當跳轉至集合中的路由時，如果“未登錄狀態”，則跳轉到登錄頁面LoginPage； 2. 當直接進入登錄頁面LoginPage時，如果“已登錄狀態”，則跳轉到首頁HomePage； ~~~js import Vue from 'vue'; import Router from 'vue-router'; import LoginPage from '@/pages/login'; import HomePage from '@/pages/home'; import GoodsListPage from '@/pages/good-list'; import GoodsDetailPage from '@/pages/good-detail'; import CartPage from '@/pages/cart'; import ProfilePage from '@/pages/profile'; Vue.use(Router) const router = new Router({ routes: [ { path: '/', // 默認進入路由 redirect: '/home' //重定向 }, { path: '/login', name: 'login', component: LoginPage }, { path: '/home', name: 'home', component: HomePage }, { path: '/good-list', name: 'good-list', component: GoodsListPage }, { path: '/good-detail', name: 'good-detail', component: GoodsDetailPage }, { path: '/cart', name: 'cart', component: CartPage }, { path: '/profile', name: 'profile', component: ProfilePage }, { path: '\*\*', // 錯誤路由 redirect: '/home' //重定向 }, ] }); // 全局路由守衛 // to: Route: 即將要進入的目標 路由對象 // from: Route: 當前導航正要離開的路由 // next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。 router.beforeEach((to, from, next) => { console.log('navigation-guards'); const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile']; let isLogin = global.isLogin; // 是否登錄 // 未登錄狀態；當路由到nextRoute指定頁時，跳轉至login if (nextRoute.indexOf(to.name) >= 0) { if (!isLogin) { console.log('what fuck'); router.push({ name: 'login' }) } } // 已登錄狀態；當路由到login時，跳轉至home if (to.name === 'login') { if (isLogin) { router.push({ name: 'home' }); } } next(); }); export default router; ~~~ ## API [[官方文檔-API]](https://router.vuejs.org/api/#router-link)