vue路由的配置以及使用
阿新 • • 發佈：2018-12-09
1.先cd切換到對應的工程目錄，然後使用npm install --save vue-router 進行安裝
2.在main.js中進行引入：(注：所有的步驟都是在Main.js檔案中建立的)
import VueRouter from 'vue-router'(注：如果在剛開始建立專案的時候選擇建立了路由，就不需要在引入了，一般main.js中已經出現import router from './router',當然你也可以刪除自定義)
3.那麼就看一下自定義的路由怎麼使用：
將router放在vue中：
Vue.use(VueRouter)
4.設定路由：
const router = new VueRouter({
mode: 'history',
routes: [{
path: "/user",//此處表示攔截所有的user請求
component: Users//註冊它時現在頭部import對應的vue元件
},
{
path: "/test",//此處表示攔截所有的user請求
component: Test1//註冊它時現在頭部import對應的vue元件
}
]
})
5.在new Vue中先引用上面設定的路由router
- 下面是個小例子自行參考：但是必不可少的是:to:表示跳轉的方向
<router-view></router-view>表示可以使用路由檢視 new Vue({ router, template: '<div id="app"><router-link to="/user">Users</router-link><hr/><router-link to="/test">test</router-link><hr/><router-view></router-view></div>' }).$mount("#app")//表示操作的根節點是id="app"的容器
所有的程式碼請參考[vue路由的配置以及使用.docx](https://pan.baidu.com/s/1wfC61ajKPKXBcCFvklSCQQ)