Vue2 实现路由效果

只需要修改四个文件就能实现vue-router的路由效果

1.创建路由组件

位置：src/pages/Home/index.vue（自行创建补全路径）

代码如下：

 
<script>
export default {
  name: '',
  props: {},
  data () {
    return {}
  },
  components: {
    
  },
  computed: {
    
  },
  mounted: {
    
  },
  watch: {
    
  },
  methods: {
    
  },
  created () {
    
  },
  mounted () {
    
  },
}
script>
 
<style scoped>
  
style>

2.创建index.js

引入vue 和 vue-router依赖

import Vue from 'vue';
import VueRouter from 'vue-router'

引入Home（路由组件）

import Home from 'src/pages/Home'

使用vue-router的依赖

Vue.use(VueRouter)

创建路由对象

const router = new VueRouter({
 
  routes: [
    { path: '/home',component:Home}
 
  ]
 
})

暴露路由对象

export default router

完整代码

import Vue from 'vue';
import VueRouter from 'vue-router'
 
import Home from 'src/pages/Home'
 
Vue.use(VueRouter)
const router = new VueRouter({
 
  routes: [
 
    { path: '/home',component:Home}
 
  ]
 
})
 
export default router

3.main.js引入暴露出来的对象router

import router from './router'

new Vue({
  router,
  // 下面这种方法传递参数也ok
  // render: function (h) { return h(App) }
    render: h => h(App),
 
}).$mount('#app')

完整代码：
 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
 
Vue.config.productionTip = false
 
new Vue({
  router,
  // render: function (h) { return h(App) }
    render: h => h(App),
 
}).$mount('#app')

4.App.vue的使用

一行代码 引入路由组件

<router-view>router-view>

完整代码：

 
<script>
 
 
export default {
  name: 'app',
  components: {
 
  }
}
script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>