vue路由实例

router.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
　　{
　　  path: '/Home',
　　  component: Home
　　},
　　{
　　  path: '/HelloWorld',
　　  component: HelloWorld
　　},
　　{
　　  path: '/',
　　  redirect: '/Home'
　　}
  ]
})

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
  routes: [
　　{
　　  path: '/Home',
　　  component: Home
　　},
　　{
　　  path: '/HelloWorld',
　　  component: () => import('./views/HelloWorld')
　　},
　　{
　　  path: '/',
　　  redirect: '/Home'
　　}
  ]
})

App.vue：

<template>
  <div id="app">
　　<headnav></headnav>
　　<router-view></router-view>
　　<p @click="addLink">链接</p>
  </div>
</template>

<script>
import HeadNav from './components/HeadNav'
  export default {
　　name: 'App',
　　data () {
　　  return {
　　  }
　　},
　　components: {
　　  'headnav' : HeadNav
　　},
　　methods:{
　　　　//点击加链接
　　　　addLink(){
　　　　　　this.$router.push({
　　　　　　　　path: '/Home',

　　　　　　　　　params: {data: this.drafe}

　　　　　　　});

　　　　}
　　}
}
</script>

  HeadNav.vue：

<template>
  <div>
　　<router-link to="/">Home</router-link>
　　<router-link to="/HelloWorld">HelloWorld</router-link>
  </div>
</template>

转载于:https://www.cnblogs.com/shirliey/p/9674644.html