Vue.js 路由 - cncml手绘网 - Powered by Discuz!

https://unpkg.com/vue-router/dist/vue-router.js

复制代码

cnpm install vue-router

复制代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>0 v5 K- C; P) g: z, p( {+ d! d
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>- t' i- O, }/ w; [" c) U: e% |+ z
9 O) [% Q$ i' f% @. z4 ?# F
<div id="app">) e. [0 G9 v# q, ^, j. M) g$ b
<h1>Hello App!</h1>
0 |$ O) {1 u: _( g; l$ I4 n/ I( G( r
<p>
9 I" `* D+ M) s% c
|( R& R8 G# K. ^
% k3 `; h* b9 \ x. K" a, a d
4 a t- I, E$ v) j1 {' ^; {' I
<router-link to="/foo">Go to Foo</router-link>6 E/ b1 u- S; }9 c( W% C, Q
<router-link to="/bar">Go to Bar</router-link>, K% O8 S' n( X
</p>
5 ^' Q! x5 D! r. A3 d, ]3 [
7 `! J* u2 H+ k& |9 d+ d
- n* ^! M+ V9 c7 L$ t( f
<router-view></router-view>
9 n P9 N8 x. x; w. `' r
</div>

复制代码

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
& I: T3 W9 P V2 f+ h9 [
" H7 ]+ e+ {, p, U! \! A. ]+ R
// 1. 定义（路由）组件。
+ E6 D, N/ r/ z% V5 ?, h( d. q
// 可以从其他文件 import 进来$ V% z# n# }1 x
const Foo = { template: '<div>foo</div>' }5 K! [$ j$ F1 I) o- \# b. [+ n0 F
const Bar = { template: '<div>bar</div>' }
3 ^# ^' A' x; Y3 T! U, l: H0 Q1 j0 O
# E" b; i- i7 n1 q9 ^4 O3 [
// 2. 定义路由
9 n" }/ S5 n3 g+ g- x
// 每个路由应该映射一个组件。其中"component" 可以是
; p& T: v1 q+ t' z
// 通过 Vue.extend() 创建的组件构造器，! E# w* N) X9 K; V
// 或者，只是一个组件配置对象。7 N; x7 R1 P5 c% I, I' ^
// 我们晚点再讨论嵌套路由。
& A F5 m/ ^( ^" [1 P
const routes = [0 D% B+ j1 T: E, B) ^& k
{ path: '/foo', component: Foo },6 }8 O* c. t) p0 H) b
{ path: '/bar', component: Bar }' x o3 a& Z9 s+ J& J) Y f: i' T
]
0 A9 R0 i7 x0 p) {/ P0 m( Q
# S3 }8 s. I5 h
// 3. 创建 router 实例，然后传 `routes` 配置. J9 S* L. l# f, [$ u, K' n9 t
// 你还可以传别的配置参数, 不过先这么简单着吧。/ q A" E; {- N' l" V; u
const router = new VueRouter({2 F: q7 _! s. i6 v8 l8 Y* s: s, ^
routes // （缩写）相当于 routes: routes
/ Q4 P: r6 c6 A& ~0 h& l
})7 [" F- w; `/ o
5 c3 o- Y0 V9 m- |. t
// 4. 创建和挂载根实例。4 ~) _+ U0 j9 b4 I: r/ L# ?
// 记得要通过 router 配置参数注入路由，
+ \8 r2 N$ b7 o1 b
// 从而让整个应用都有路由功能2 k: |" B* E$ ]7 F9 v
const app = new Vue({
9 P# Q. z: k. }# E; Y) ?6 R
router
, a9 z: H2 G% J0 D/ Z% u/ |1 j
}).$mount('#app')
8 Y) B" L: o+ |/ o/ z+ f
& k+ L) {. Y- U7 c$ a3 Q5 c( n
// 现在，应用已经启动了！

复制代码

# 安装依赖，使用淘宝资源命令 cnpm) R& D- M+ o# a- Y, F4 _" j6 j
cnpm install, j) K; y. _% L% z) F; L; N
! U/ H2 G2 v G7 m2 e- m( Y
# 启动应用，地址为 localhost:8080
9 y/ U1 C5 s$ n) H# {
cnpm run dev

复制代码

cnpm run build

复制代码