1、Vue-router整合
阿新 • • 發佈：2019-02-20
今天我們聊一下vue的全家桶成員之一Vue-router
Vue-router就是一個前端路由的功能，現在我們開發前端webapp，路由是一個必不可缺的功能，我們只做webapp相對於以前的網站來說，我們一個連線輸入然後跳轉到後端進行一個模板渲染，產生一個新的html，返回給瀏覽器端，瀏覽器把這個內容顯示出來，這是一次路由跳轉。
作為單頁應用來說，我們的路由跳轉是不經過後端伺服器的。我們的頁面渲染內容全部是基於JavaScript;
既然路由跳轉是由前端去做，我們就需要一個稱職合理的工具幫助我們更好的去處理前端路由。
現在來說每個前端框架都會配一個路由工具，我們的vue使用的是Vue-router;
我們在client目錄下新建一個config目錄，在config下新建一個router.js檔案和routes.js檔案目錄；
為什麼要這樣做呢，因為在我們的專案變得更強大之後，我們的路由配置肯定會變得非常的多，
我們希望單獨配置一個和路由對映關係的配置檔案。
router.js這個的檔案主要是router的一些配置和設定的內容。
下面我一起安裝一下vue-router
npm i vue-router -S
首先我們在routes.js把路由對映的關係給列好；每個路由項都是作為一個數組去配置的，
跳轉的頁面，我們需要先將頁面引入；
import 名字 from '../路徑'
在router.js檔案中我們先要將vue-router引入,同時我們也需要將routes引進來
import Router from 'vue-router'
import routes from './routes'
在index.js中將vue-router加到整個應用當中去；所以我們要在index.js中獎vue-router引入進來
import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'
通過vue外掛的使用方式，使用VueRouter
Vue.use(VueRouter)
建立路由
const router = createRouter()
將router注入到應用裡面
new Vue({
router,
render: (h) => h(App)
}).$mount('#root')
這個vue-router的一個使用方法，他會通過我們在根節點的vue例項上面，掛在了這個router物件之後，然後通過Provider或者其他的類似方式讓我們在每個元件裡面都可以使用這個router物件，
Vue-router就是一個前端路由的功能，現在我們開發前端webapp，路由是一個必不可缺的功能，我們只做webapp相對於以前的網站來說，我們一個連線輸入然後跳轉到後端進行一個模板渲染，產生一個新的html，返回給瀏覽器端，瀏覽器把這個內容顯示出來，這是一次路由跳轉。
作為單頁應用來說，我們的路由跳轉是不經過後端伺服器的。我們的頁面渲染內容全部是基於JavaScript;
既然路由跳轉是由前端去做，我們就需要一個稱職合理的工具幫助我們更好的去處理前端路由。
現在來說每個前端框架都會配一個路由工具，我們的vue使用的是Vue-router;
我們在client目錄下新建一個config目錄，在config下新建一個router.js檔案和routes.js檔案目錄；
為什麼要這樣做呢，因為在我們的專案變得更強大之後，我們的路由配置肯定會變得非常的多，
我們希望單獨配置一個和路由對映關係的配置檔案。
router.js這個的檔案主要是router的一些配置和設定的內容。
下面我一起安裝一下vue-router
npm i vue-router -S
首先我們在routes.js把路由對映的關係給列好；每個路由項都是作為一個數組去配置的，
跳轉的頁面，我們需要先將頁面引入；
import 名字 from '../路徑'
在router.js檔案中我們先要將vue-router引入,同時我們也需要將routes引進來
import Router from 'vue-router'
import routes from './routes'
在index.js中將vue-router加到整個應用當中去；所以我們要在index.js中獎vue-router引入進來
import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'
通過vue外掛的使用方式，使用VueRouter
Vue.use(VueRouter)
建立路由
const router = createRouter()
將router注入到應用裡面
new Vue({
router,
render: (h) => h(App)
}).$mount('#root')
這個vue-router的一個使用方法，他會通過我們在根節點的vue例項上面，掛在了這個router物件之後，然後通過Provider或者其他的類似方式讓我們在每個元件裡面都可以使用這個router物件，
routes.js
// import Todo from '../views/todo/todo.vue'
// import Login from '../views/login/login.vue'
export default [
{
path: '/login',
component: () => import(/* webpackChunkName: "login-view" */ '../views/login/login.vue')
// component: Login
}
]router.js
import Router from 'vue-router' import routes from './routes' export default () => { return new Router({ routes }) }
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import createRouter from './config/router'
Vue.use(VueRouter)
const router = createRouter()
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#root')