vuejs笔记之路由/子路由例子

责编:menVScode 2017-10-24 22:39 阅读(1028)


import Vue from 'vue'
// 引入文件的路劲没有 ./ 或者 / ,那么直接是找node_modules目录下的文件
import Router from 'vue-router'

const App = {
  'template': `<div id="app">
    默认显示的内容
    <!-- 表示模板的地方 -->
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}

// 可以直接{},也可以Vue.component{},根元素只能有一个
const index = {
  template: `<div>这里是index</div>`
}

const about = {
  template: `<div>
    这里是about页面
    <router-link to='about/about001'>about001</router-link>
    <router-view></router-view>
  </div>`
}

const about001 = {
  template: `<div>about001</div>`
}
// 跟路由显示的地方是第一个 router-view 的标签里
// 子路由显示的地方是父级路由模板里的第一个 router-view 的标签里
const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/about', component: about, children: [{path: 'about001', component: about001}]}
  ]
})

// 使用路由插件
Vue.use(Router)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})


标签: 路由 router vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码