关于vue-router的使用
发布于 6 年前 作者 hezhongfeng 17647 次浏览 来自 问答

本地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')
9 回复

?一闪而过的原因找到了么?

const app = new Vue({ router, render: h => h(App) }).$mount(’#app’);

最后那个按照这样修改下

或者这样也行

const app = new Vue({ router, …App }).$mount(’#app’);

@lastsho 谢谢 这样也试过的,气死我了 不知道咋回事,崩溃了 今天重新用cli模板搞了一个 就好使了

@wuxiaolan91 没有,重新使用cli整了一个就好了 昨天也有可以显示的时候,但是看不到router-view… 疯了就重新整的

怎么默认加载foo这个路由啊

文档写的很清楚啊 <br> <br><p>来自吊吊的 <a target="_blank" href=“https://github.com/ihanyang/cnode-vue”>cnode-vue</a></p>

@lastsho 这样确实解决了,两个方法都可以,谢谢了。 第二个里面的三个点是什么语法

@wanghongrui es6里的,你可以去找找,我表达的话怕不准确,用法蛮多,去看文档比较好

如果还有看不懂的,推荐一个Vue-router的入门与提高教程:

http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50?affid=20180314cnode

回到顶部