您好,登錄后才能下訂單哦!
小編給大家分享一下vue2路由vue-router配置的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
vue路由配置以及按需加載模塊配置
1、首先在component文件目錄下寫倆組件:
First.vue:
<template> <div>我是第一個頁面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h2, h3 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
Second.vue:
<template> <div>我是第二個頁面</div> </template> <script> export default { name: 'second', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h2, h3 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
2、router目錄下的index.js文件配置路由信息:
import Vue from 'vue' import VueRouter from 'vue-router' /*import First from '@/components/First' import Second from '@/components/Second'*/ Vue.use(VueRouter) /*const routes = [ //重定向 { path:'/', redirect:'first' }, { path: '/first', name: 'First', component: First }, { path: '/second', name: 'Second', component: Second } ]*/ //懶加載路由 const routes = [ { //當首次進入頁面時,頁面沒有顯示任何組件;讓頁面一加載進來就默認顯示first頁面 path:'/', //重定向,就是給它重新指定一個方向,加載一個組件; component:resolve => require(['@/components/First'],resolve) }, { path:'/first', component:resolve => require(['@/components/First'],resolve) }, { path:'/second', component: resolve => require(['@/components/Second'],resolve) } //這里require組件路徑根據自己的配置引入 ] //最后創(chuàng)建router 對路由進行管理,它是由構造函數 new vueRouter() 創(chuàng)建,接受routes 參數。 const router = new VueRouter({ routes }) export default router;
3、main.js中引入路由配置文件:
import $ from 'jquery' import Vue from 'vue' import App from './App' import router from './router' //引入路由配置文件 import './assets/css/bootstrap.min.css' import './assets/js/bootstrap.min' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, // 注入到根實例中 render: h => h(App) })
4、App.vue引入路由配置導航:
<template> <router-link to="/first">跳轉第一個頁面</router-link> <router-link to="/second">跳轉第二個頁面</router-link> <div id="view"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> </style>
以上是“vue2路由vue-router配置的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。