zoukankan      html  css  js  c++  java
  • 【转载】关于vue-router的使用

    本地dev环境,打开后直接跳转到http://localhost:8080/#/并且index.html上的内容一闪而过,然后就啥也没有了,好气啊 index.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>webpack</title>
    </head>
    <body>
    	<div id="app">
    		<h1>Hello App!</h1>
    		<p>
    			<!-- 使用 router-link 组件来导航. -->
    			<!-- 通过传入 `to` 属性指定链接. -->
    			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    			<router-link to="/foo">Go to Foo</router-link>
    			<router-link to="/bar">Go to Bar</router-link>
    		</p>
    		<!-- 路由出口 -->
    		<!-- 路由匹配到的组件将渲染在这里 -->
    		<router-view></router-view>
    	</div>
    	<!-- built files will be auto injected -->
    </body>
    </html>

    下面是main.js

    import Vue from 'vue'
    import VueRouter from "vue-router";
    Vue.use(VueRouter);
    
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器,
    // 或者,只是一个组件配置对象。
    // 我们晚点在讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    
    // 3. 创建 router 实例,然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由,
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

    原网址:http://cnodejs.org/topic/581705321a9a7d99095312e3
  • 相关阅读:
    概要设计说明书
    第二次冲刺——第6天
    第二次冲刺——第5天
    第二次冲刺——第4天
    开发文档
    “来用”Beta版使用说明
    项目总结
    团队站立会议10(第二阶段)
    团队站立会议9(第二阶段)
    团队站立会议8(第二阶段)
  • 原文地址:https://www.cnblogs.com/ylsq/p/6612195.html
Copyright © 2011-2022 走看看