zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    制作一个Frame用于保存文件和打开文件
    制作一个Frame界面显示盘符的东西
    制作一个图形化界面(演示键盘和鼠标的监听)
    编码解码练习---截取字节
    编码解码问题
    一些在内存里面操作的流
    类型流DataInputstream 和DataOutputStream的用法
    管道流 PipedInputStream和PipedOutputStream 用法
    RandomAccessFile的用法
    面向对象的更多说明
  • 原文地址:https://www.cnblogs.com/zuxiyo/p/6098613.html
Copyright © 2011-2022 走看看