Vue学习简记（十二）路由1--基础使用

路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

1.基本使用

1. 安装vue-router，命令：npm i vue-router注：vue2配3,vue3配4

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   

4. 实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>
   

5. 指定展示位置（和插槽相似）

   <router-view></router-view>
   

2.几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

图示例子（使用了bootstrap.css）：

pages/Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
    name:'Home',
    mounted(){
        console.log('Home组件挂载完毕',this.$route,this.$router)
    },
    beforeDestroy() {
        console.log('Home组件即将销毁')
    },
}
</script>

pages/About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:'About',
    mounted(){
        console.log('About组件挂载完毕',this.$route,this.$router)
    },
    beforeDestroy() {
        console.log('About组件即将销毁')
    },
}
</script>

router/index.js

import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'

export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
		  
		  //Vue中借助router-link标签实现路由的切换 
		  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
			// 指定组件的呈现位置
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
    name: "App",
}
</script>