【转载】关于vue-router的使用

时间 2019-12-14

标签转载关于 vue router 使用繁體版

原文原文链接

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

<!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.jsvue

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