vue-router

1.安装

npm install --legacy-peer-deps [email protected]

要指定版本号 否则会报错

2. 使用

2.1 在src下创建router目录，在其中新建index.js文件

import VueRouter from "vue-router";
//引入一个路由组件
import Home from '../pages/Home'
 
//创建一个路由并暴露出去 注意component没有引号
export default new VueRouter({
    routes:[
        {
            name:'home',
            path:'/home',
            component:Home
        }]
})

2.2 main.js

// 引入路由
import VueRouter from 'vue-router'
import router from './router'
​
Vue.use(VueRouter)
​
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

2.3 App.vue

<template>
  <div id="app">
	<router-link to="/home">home</router-link>
	<router-view></router-view>
  </div>
</template>

2.4

• router-link 来创建链接
• router-view 将显示与 url 对应的组件,放在需要的地方

3.嵌套路由

3.1 index.js

import left from '../pages/panel/Left'
import top from '../pages/panel/top'

routes:[{
	name:'home',
        path:'/home',
        component:home,
	children:[
	{
	  name:'left',
	  path:'/left/:id',
	  component:left,
	  props:true
	},{
	  name:'top',
	  path:'/top',
	  component:top,
	}]

3.2 left和top内容页

<template>
  <div>
    内容2
  </div>
</template>

<script>
  export default{
    name:"top"
  }
</script>

<template>
  <div>
    内容1
  </div>
</template>

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

3.3 home.vue

<template>
  <router-link to="/left">选项1</router-link>
  <router-link to="/top">选项2</router-link>
  <!-- 嵌套路由，点击不同连接 产生的内容页不同 -->
  <el-main>
      <router-view></router-view>
  </el-main>
</template>

3.4 效果

点击不同路由连接，产生的内容页不同

4.参数传递