Vue-router(Vue中路由基础详解)

Vue-router(Vue中路由基础详解)

安装

1.Html页面直接引入

<script src="vue.js"></script>
<script src="vue-router.js"></script>

vue-router下载链接
https://unpkg.com/vue-router/…
2.npm下载

npm install vue-router

在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码

import vueRouter from 'vue-router'
import routes from './router/routes.js'
Vue.use(vueRouter)
// 定义路由组件
const router = new vueRouter({
  routes,
  mode:'history'
})
// 定义路由
new Vue({
  router
})

书写html

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>