vue07-router 路由

Posted 2020-10-25 caijw

main.js

vue init webpack //选择router

import router from ‘./router‘
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

router/index.js

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import Contact from ‘@/components/Contact‘
import Friend from ‘@/components/Friend‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path: ‘/Contact/:id/:name‘,
      name: ‘Contact‘,
      props : true,//是否接受参数
      component: Contact
    },
    {
      path: ‘/Friend‘,
      name: ‘Friend‘,
      component: Friend
    }
  ]
})

Contact.vue

<template>
    <div>
        <h1>contact</h1>
        {{id}} {{name}}
    </div>
</template>

<script>
    export default {
        props : [
            ‘id‘,
            ‘name‘
        ]
    }
</script>

代码在github上，如果觉得有帮助请给我星星

源代码下载