vue 路由总结

vue 路由总结

       使用vue-cli安装不需要另外安装路由，只需要在安装时候选择Manually select features，然后选到router按下空格就行

1、 vue路由有两种路由模式

在 router 文件夹下的 index.js文件中

const router = new VueRouter({
   
	// 给 属性值改为 hash 或者注释掉 默认就是hash路由模式
  // mode: 'history',  // 属性值为 history，是history路由模式
  base: process.env.BASE_URL,
  routes
})

2、路由配置

在 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 "../views/Home.vue";
    import About from "../views/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 标签管理所有组件

App.vue

    <template>
    	<div>
          	<!-- 路由管理下的组件都加载router-view里面 -->
    		<router-view/>  
        </divvue
    </template>

Home.vue