菜单列表

首页
助手
动态
下载
工具
视频教程
登录

vue新项目搭建vue-router 在项目中的使用

韩宇 2020-05-15 938

一、下载vue-router npm install vue-router --save 二、编码 1、在项目中新建文件夹 router/index.js ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import page from '@/pages/index/index.vue' import login from '@/pages/login/index.vue' export default new VueRouter({ routes: [ { path: '/page', name: 'page', component: page, meta: { title: '首页' } } ,{ path: '/login', name: 'login', component: login, meta: { title: '登录' } } ] ,mode: "history" }) ``` 2、在main.js中全局使用router ``` import Vue from 'vue' import App from './App.vue' import Vant from 'vant'; import router from './router' //引入路由 import 'vant/lib/index.css'; Vue.use(Vant); //修改路由标题 router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title; } next(); }) new Vue({ render: h => h(App), router //引入路由 }).$mount('#app') ``` 2)在App.vue引入FooterGuide.vue组件 和 router-view 区域 重要 ``` ``` 4页面跳转 ``` ```

注:原创不易,转载请注明出处( https://micuer.com/new/494.html )
广告

韩宇

米醋儿会员

关于我

希望总是那么渺茫,如果无法完成,那么久放弃吧
给我留言
 
最新留言

快来留下你的脚印吧~