Vue之路由实现动态挂载组件

Vue路由简单使用

1. VueRouter

-1.中文官网:https://router.vuejs.org/zh/
-2.VueROuter英文官网:https://router.vuejs.org/

2.Vue路由配置:

2.1 安装Vue路由

npm install vue-router  --save   / cnpm install vue-router  --save

---

2.2 引入并 Vue.use(VueRouter) (main.js入口文件写)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

---

2.3 配置路由

2.3.1 创建组件 引入组件

//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';

2.3.2 定义路由(建议复制)

//2.配置路由 注意名字
const routes=[
  { path: '/home',component:Home},
  {path:'/news', component:News},
  { path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]

2.3.3 实例化VueRouter

//3.实例化VueRouter
const router=new VueRouter({
  routes //（缩写）相当于 routes：routes
})

2.3.4 挂载路由

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

2.3.5 标签引入

//5.把<router-view></router-view>放在根组件App.vue里

---

3. 具体代码实现

3.1 挂载的两个简单组件

<template>
  <div id="home">
  <h2>我是home组件</h2>
  </div>
</template>

<script>
export default {
 
  data () {
    return {
    
    }
  }
}
</script>

<style lang="scss">

</style>


<template>
  <div id="news">
  <h2>我是news组件</h2>
  </div>
</template>

<script>
export default {
 
  data () {
    return {
    
    }
  }
}
</script>

<style lang="scss">

</style>

3.2 main.js入口文件的配置

import Vue from 'vue'
import App from './App.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意名字
const routes=[
  { path: '/home',component:Home},
  {path:'/news', component:News},
  { path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]
//3.实例化VueRouter
const router=new VueRouter({
  routes //（缩写）相当于 routes：routes
})
//4.挂载路由 router

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5.把<router-view></router-view>放在根组件App.vue里

3.3 根组件App.vue的配置

<template>
  <div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
    <hr>
    <router-view></router-view>
  
  </div>
</template>

<script>
export default {
 
  data () {
    return {
    msg:'你好vue'
    }
  }
}
</script>

<style lang="scss">

</style>