vue-----路由

使用vue-cli安裝不需要另外安裝路由，只需要在安裝時候選擇Manually select features，然後選到router按下空格就行

vue路由分爲前端路由和後端路由

路由配置

• Router
• Views

//main.js
import router from "./router"
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

初始化路由

在路由模塊的入口文件index.js配合router

//引入vue
import Vue from 'vue';
//引入router
import VueRouter from 'vue-router'
//引入組件
import Home from "../xxx/Home.vue";
import About from "../xxx/About.vue"

//全局配置路由
Vue.use(VueRouter)

//集成路由
const routes = [
	{
        //路徑
        path:"/",
        //路由名稱
        name:"home",
        //路由加載的組件
        component:Home
    },
    {
        path:"/about",
        name:"about",
        component:About,
    }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

嵌套路由

嵌套路由用到了children屬性，實現嵌套

//引入vue
import Vue from 'vue';
//引入router
import VueRouter from 'vue-router'
//引入組件
import Home from "../xxx/Home.vue";
import Hot from "../views/Hot.vue";

//全局配置路由
Vue.use(VueRouter)

//集成路由
const routes = [
	{
        //路徑
        path:"/",
        //路由名稱
        name:"home",
        //路由加載的組件
        component:Home,
        //嵌套路由
        children:[
            {
                path: "/hot",
        		name: "hot",
        		component: Hot
            }
        ]
    },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

路由管理下的組件都會加載到一個router-view標籤中，在app.vue中有一個最大的router-view標籤管理所有組件

<template>
	<div>
        <!-- app.vue -->
      	<!-- 路由管理下的組件都加載router-view裏面 -->
		<router-view/>  
    </divvue
</template>

home.vue

<template>
	<div>
        <button @click="onClick">點擊跳轉</button>
        <!-- 如果home頁面有嵌套路由 也會加載在router-view裏面 -->
        <router-view/>
    </div>
</template>

<script>
	export default{
		methods:{
			onClick(){
                //點擊跳轉嵌套路由
                this.$router.push("/hot")
            }
        }
    }
</script>