首页 > 代码库 > Vue + vue-router
Vue + vue-router
搞了一天的element-ui,vue-router,把侧栏的导航菜单搞了出来后,试着在菜单上加入链接,研究了下官方提供的文档,发现要使用vue-route。
在项目中安装好vue-route, 对照vue-router的文档及网上的例子,在项目中加入了路由功能,搞了一天,试了无数次,链接一直无效!!!
项目起始页 index.html 代码
<div id="mainApp"> <h1>Hello App!</h1> <p> <router-link to="/">Go to Index</router-link> <router-link to="/users">Go to Users</router-link> </p> <router-view></router-view> </div>
在main.js中这样配置正常:
import Vue from ‘vue‘
import VueRouter from "vue-router";
Vue.use(VueRouter); const Index = { template: ‘<div>Index</div>‘ } const User = { template: ‘<div>User</div>‘ } const routes = [ { path: ‘/‘, component: Index }, { path: ‘/users‘, component: User } ] const router = new VueRouter({ routes }) console.log(routes);
const app = new Vue({ router }).$mount(‘#mainApp‘)
点击链接显示文字:
把路由路径独立出来放在单独的文件夹中,路由就不起作用:
//main.js import Vue from ‘vue‘ import VueRouter from "vue-router"; import RoutesMap from ‘./routes/‘ Vue.use(VueRouter); const router = new VueRouter({ RoutesMap }) console.log(RoutesMap); const app = new Vue({ router }).$mount(‘#mainApp‘)
// routes/index.js const Index = { template: ‘<div>Index</div>‘ } const User = { template: ‘<div>User</div>‘ } const routes = [ { path: ‘/‘, component: Index }, { path: ‘/users‘, component: User } ] export default routes
点击链接没有动静,还没法调试:
真要吐血了。。。
Vue + vue-router
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。