在项目根目录下执行 安装vue-router 操作
cnpm install vue-router
如果出现下面的情况,则证明安装成功
在项目 根目录 src 文件夹下, 新建一个 router 文件夹, 在该文件夹下, 新建一个 router.js 文件。并输入以下内容
import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入组件 import home from '../view/home.vue' import my from '../view/my.vue' Vue.use(VueRouter); const routes = [ { path:"/",//访问路径 component:home//组件名称 }, { path:"/home",//访问路径 component:home//组件名称 }, { path:"/my",//访问路径 component:my//组件名称 }, ] var router = new VueRouter({ routes }) export default router;
这时候页面会报错,暂时不用管
紧接着在 项目根目录 下 src 文件夹下的 main.js 中 添加如下内容
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import router from './router/router.js'; Vue.use(VueRouter); Vue.config.productionTip = false new Vue({ el:'#app', router, render: h => h(App), }).$mount('#app')
在 项目根目录 下 src 文件夹下的 app.vue 中 的template内的div添加如下内容,之前的内容则去掉
<router-view></router-view>
在 项目根目录 下 src 文件夹下的 新建 views文件夹, 添加 home.vue 和 demo.vue 文件,将两个文件都输入内容,格式如下,随后刷新页面即可
<template> <div> <router-link to="./my">//跳转页 <h1> {{ msg }} </h1> </router-link> </div> </template> <script> export default { data() { return { msg: "首页", }; }, }; </script>