关于vue-router的使用

问答

Hhezhongfeng发布于10 年前最后回复8 年前|9 回复18877 浏览0 收藏

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

查看回复

wuxiaolan91#1·10 年前

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

lastsho#2·10 年前

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

最后那个按照这样修改下

或者这样也行

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

hezhongfeng#3·10 年前

引用 lastshoconst app = new Vue({ router, render: h = h(App) }).$mount(' app'); 最后那个按照这样修改下或者这样也行 const app...

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

hezhongfeng#4·10 年前