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>
posted @ 2018-09-19 15:03 shirliey 阅读(...) 评论(...) 编辑 收藏