首页 > 其他 > 详细

vue-router使用

时间:2020-04-01 11:33:18      阅读:158      评论:0      收藏:0      [点我收藏+]

一、注册vue-router

import VueRouter from ‘vue-router‘

Vue.use(VueRouter);

二、创建 router 实例并routes 定义路由

const router = new VueRouter({
  mode:"history",
  routes: [
    { path: "/", component: Vmain },
    { path: "/markedown", component: Vcontent },
  ]
})

三、定义(路由)组件

  导入

import Vcontent from ‘./components/Vcontent‘
import Vmain from ‘./components/Vmain‘

四、创建和挂载根实例

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

五、HTML使用

<template>
  <div class="app">
    <router-link to="/">首页</router-link>
    <router-link to="/markedown">marked</router-link>

    <router-view></router-view>
  </div>
</template>

 

注意问题:

  1、创建router和挂载时,关键字router一定不能错

  2、定义路由时,routes关键子一定一定不能错

  3、路由出口<router-view></router-view>一定一定要写

 

vue-router使用

原文:https://www.cnblogs.com/aizhinong/p/12609849.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!