Vue + vue-router

Posted 福爷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

点击链接没有动静,还没法调试:

真要吐血了。。。

 

2016年11月25日15:25:23 路由问题已解决:

 

//main.js
import Vue from \'vue\'
import VueRouter from "vue-router";
import RoutesMap from \'./routes/\'

Vue.use(VueRouter);

//需要使用一个具名数组
const router = new VueRouter({
 routes: RoutesMap
})
console.log(RoutesMap);

const app = new Vue({
  router
}).$mount(\'#mainApp\')

 

以上是关于Vue + vue-router的主要内容,如果未能解决你的问题,请参考以下文章

百行代码带你入门 vue-router!

Vue-Router

Vue.js 生态之vue-router

vue2.0有哪些变化

Vue.js 生态之Vue-router 基础三

typescript vue-router代码分裂