/* 導入Vue構造函數 */
import Vue from 'vue'
/* 導入路由VueRouter構造函數 */
import VueRouter from 'vue-router'
/* 導入HomeView頁面 */
import HomeView from '../views/HomeView.vue'
//調用構造函數Vue的use方法 傳入VueRouter構造函數
//作用是把VueRouter作為壹個插件 全局插入到Vue中
Vue.use(VueRouter)
/* 定義壹個路由數組對象 */
const routes = [
? /* 壹個對象就對應了壹個路由
? path就是路由的地址
? name給路由起的名字
? component 具體跳轉的頁面
? */
? {
/* path: '/' 根頁面,表示已進入就顯示的頁面 */
path: '/',
name: 'home',
/* 這種方式壹進入頁面就會全部加載,不是用到的時候再加載
性能沒有懶加載的方式好 */
component: HomeView,
/* 可以使用redirect 重定向 已進入主頁就展示第壹個子頁面
?redirect 後面跟的是路徑名 並不是name */
?/* 因為/是根路徑 所有可以直接寫one */
redirect:'one',
children:[{
? path:'one',
? name:'one',
? component: () => import('../views/OneView.vue')
}]
? },
? {
/* 這裏是壹級目錄所以可以加/ 表示根目錄 */
path: '/about',
name: 'about',
// 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/AboutView.vue'),
/* about不是根路徑 所以redirect後面要寫全 '/about/aboutchild', */
redirect:'/about/aboutchild',
children:[{
? path:'aboutchild',
? name:'aboutchild',
? component: () => import('../views/AboutChild.vue')
}]
? },
? {
path:'/ChildA',
name:'ChildA',
component: () => import('../components/ChildA.vue')
? },
? {
/* path:'*' 必須要放最後 */
/* path:'*' 表示上面的路由沒有匹配到 則進入下面的頁面 */
path:'*',
name:'notfound',
component: () => import('../components/NotFound.vue')
? }
]
/* 實例化構造函數 VueRouter 產生壹個實例化對象
並把上面的路由數組對象routes當作參數 以對象的方式傳給構造函數 VueRouter*/
const router = new VueRouter({
? routes
})
/* 把實例化路由對象 router默認導出 ?*/
export default router
main.js文件：
/* 導入Vue構造函數 */
import Vue from 'vue'
/* 導入App.vue入口頁面 */
import App from './App.vue'
/* 導入router文件夾中的index.js中的router實例化對象 */
/* 壹個文件夾裏面只有壹個index.js文件在腳手架中可以把./router/index.js簡寫為./router ?*/
import router from './router'
/* 生產提示 */
/* 改成false是用來關閉開發者提示 */
Vue.config.productionTip = false
/* 在Vue的對象參數裏面配置 el:"#app" 等於 .$mount('#app')
都是用來掛載到id為#app的div上的*/
/* 把路由實例化對象router配置在Vue中,作用是保證項目中
所有的vue文件都可以使用router路由的屬性和方法 */
new Vue({
? router,
? /* 會把所有vue文件渲染到App組件上 */
? render: h => h(App)
}).$mount('#app')/* 等同於 el:"#app" */
viwes文件下：
App.vue文件：
<template>
? <div id="app">
<nav>
? <!-- router-link 組件是負責跳轉的 to屬性是用來寫跳轉路徑的
? router-link組件本質上是有a標簽來實現的 路由跳轉的原理是根據
? 錨點來的 -->
? <router-link to="/">Home</router-link> |
? <router-link to="/about">About</router-link> |
? <router-link to="/ChildA">點我跳轉ChildA</router-link> |
? <router-link to="/ChildB">點我跳轉ChildB</router-link> |
</nav>
<!-- router-view 組件是用來展示組件的容器 -->
<router-view/>
<!-- 創建兩個組件ChildA 和ChildB 並寫兩個 router-link 可以實現跳轉
?組件顯示在 router-view 容器中 -->
? </div>
</template>
<style>
#app {
? font-family: Avenir, Helvetica, Arial, sans-serif;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
? text-align: center;
? color: #2c3e50;
}
nav {
? padding: 30px;
}
nav a {
? font-weight: bold;
? color: #2c3e50;
}
/* .router-link-exact-active 跳轉鏈接被激活的時候加載到router-link身上 */
nav a.router-link-exact-active {
? color: #42b983;
}
</style>
AboutView.vue文件：
<template>
? <div class="about">
<h1>This is an about page</h1>
<!-- to後面寫的是路徑 -->
<!-- <router-link to="/about/aboutchild">我是aboutchild</router-link> -->
<!-- to 後面要加: 作用是把後面解析成壹個對象而不是字符串 -->
<router-link :to="{name:'aboutchild'}">我是aboutchild</router-link>
<!-- 二級路由顯示的容器 -->
<router-view></router-view>
? </div>
</template>
AboutChild.vue文件：
<template>
? <div>
? <h1>AboutChild</h1>
? </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
HomeView.vue文件：
<template>
? <div class="home">
<h1>KW47沖沖沖</h1>
<router-link to="/one">ONEview</router-link>
<!-- 二級路由對應的組件容器 -->
<router-view></router-view>
? </div>
</template>
<script>
// @ is an alias to /src
export default {
? name: 'HomeView',
? components: {
? }
}
</script>
OneView.vue文件：
<template>
? <div>
? <h1>我是ONEVIwe</h1>
? </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
components文件下：
ChildA.vue文件：
<template>
? <div>
? <h1>我是CHildA</h1>
? </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
ChildB.vue文件：
<template>
? <div>
? <h1>我是ChildB</h1>
? </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
NotFound.vue文件:
<template>
? <div>
? <h1>我是notfound</h1>
? </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
左邊文件目錄：