[JavaScript知识库]路由的使用与说明

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

基本使用

安装vue-router，命令：npm i vue-router@3(当使用vue2时，应插入vue-router@3)

例子
项目结构

index.js(router文件夹)【含多级路由】

import VueRouter from "vue-router";

import Home from '../page/Home'
import Profile from '../page/Profile'
import News from '../page/News'
import Message from '../page/Message'
import Detail from '../page/Detail'

export default new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home,
            children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News,
                children:[
                    {
                        path:'detail',
                        component:Detail
                    }
                ]
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
        },
        {
            path:'/profile',
            component:Profile
        }
    ]
})

main.js文件（导入router和vue-router;并使用VueRouter）

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue文件

上述代码注析
<a></a>需要换成<router-link></router-link>
<router-link></router-link>中有active-class="active"和to=‘’
其中active-class="active"代表选中该li时，突显颜色
to=''代表路由的路径
使用<router-view></router-view>让Home.vue或Profile.vue中的内容展示在页面

Home.vue文件

<template>
  <div>
      <ul class="nav nav-pills">
        <li role="presentation" ><router-link active-class="active" to="/home/message">Message</router-link></li>
        <li role="presentation"><router-link active-class="active" to="/home/news">News</router-link></li>
      </ul>
      <div><router-view></router-view></div>
     </div>
</template>

<script>
export default {
   name:'Home'
}
</script>

<style>

</style>

效果图