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>