今天学习了关于vue-router的知识，其实在vue2里router的操作并没有变化，用它来创建单页应用是非常简单的，只要配置组建和路由映射，然后告诉vue-router在那里渲染它就可以了。
第一个小实例:
JavaScript里可以简单的分成4个步骤来写和添加一个路由器：
- 定义路由组件
- 定义路由
- 创建router实例
- 创建和挂载实例
下边我们看一下代码，这个代码非常简单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<
!
DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
VueJS
<
/
title
>
<script
src
=
"./vue.js"
>
</script>
<script
src
=
"./bower_components/vue-router/dist/vue-router.js"
>
</script>
<
/
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
>
<script
src
=
"./index.js"
>
</script>
<
/
body
>
<
/
html
>
|
JS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//1.定义路由组建
//可以从其他文件import 进来
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实例，然后传·routers·配置
//你还可以传别的配置参数，不过先这么简单着吧
const
router
=
new
VueRouter
(
{
routes
}
)
;
//4.创建和挂载跟实例。记得要通过router配置参数注入路由，从而让整个应用都有路由功能
var
app
=
new
Vue
(
{
el
:
'#app'
,
router
}
)
;
|
再写这段代码中我犯了一个错误，就是把index.js这个脚本文件放到了<head>标签里，然后测试时出现了[Vue warn]: Cannot find element: #app 的错误提示，效果也没有出来，其实这是一个很简单的错误，只要把index.js放到所有DOM的最后，等dom加载完就不会出现这样的错误。
第二个小实例（动态路由）：
所谓的动态路由，就是在路由里传参数，比如我们作电商网站的时候，经常用的商品详细页，就是一个典型用到动态路由案例，每个商品都不一样，但是打开来的模板是一样的。
比如我们有个user页面，我们后边设置两个链接，但是都是用的User模板，却显示的内容不同。关键语法是“：id”，这里的id代表参数。我们来看一下代码吧，代码中我加了详细的注释。
html代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
VueJS
</title>
<script src="./vue.js" ></script>
<script src="./bower_components/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div
id
=
"app"
>
<p>
<!--都是调用user模板，但是后边的参数不一样，显示的内容也不一样-->
<router-link
to
=
'/user/foo'
>
/user/foo
</router-link>
<router-link
to
=
'/user/bar'
>
/user/bar
</router-link>
</p>
<!--显示的内容区域-->
<router-view>
</router-view>
</div>
<script src="./index.js"></script>
</body>
</html>
|
js代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//这里只定义了一个user模板组件
const
User
=
{
template
:
'<div>User {{$route.params.id}}</div>'
}
;
// 定义路由，component代表上面的路由组建
const
routes
=
[
{
path
:
'/user/:id'
,
component
:
User
}
]
;
//实例化router
const
router
=
new
VueRouter
(
{
routes
}
)
;
//实例化Vue和挂载路由
const
app
=
new
Vue
(
{
router
}
)
.
$
mount
(
'#app'
)
;
|
注意：在写这段代码的时候，注意定义的路由 要写成 const routes 而不是 const routers 。不知道为什么会出现这种情况，路由效果是出不来的，而且也不报错。
正确写法
|
1
2
3
4
5
6
7
|
// 定义路由，component代表上面的路由组建
const
routes
=
[
{
path
:
'/user/:id'
,
component
:
User
}
]
;
//实例化router
const
router
=
new
VueRouter
(
{
routes
}
)
;
|
错误写法：
|
1
2
3
4
5
6
7
|
// 定义路由，component代表上面的路由组建
const
routers
=
[
{
path
:
'/user/:id'
,
component
:
User
}
]
;
//这里的routes写成了routers
//实例化router
const
router
=
new
VueRouter
(
{
routers
//跟随上边，不知道为什么不来结果，也不报错
}
)
;
|
这个问题，我会继续跟进的…..
第三个小实例（嵌套路由）
我们在开发中大多数是嵌套路由，所以这个操作也是最常用的。嵌套路由的语法就是在制作路由代码是加childern参数。
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
VueJS
</title>
<script src="./vue.js" ></script>
<script src="./bower_components/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div
id
=
"app"
>
<router-link
to
=
"/user/foo"
>
Go to Foo
</router-link>
<router-link
to
=
"/user/foo/profile"
>
Go to profile
</router-link>
<router-link
to
=
"/user/foo/posts"
>
Go to posts
</router-link>
<router-view>
</router-view>
</div>
<script src="./index.js"></script>
</body>
</html>
|
JS代码，里边有详细的注释
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
const
User
=
{
template
:
'<div class="user"><h2>User {{$route.params.id}}</h2><router-view></router-view></div>'
}
;
const
UserProfile
=
{
template
:
'<div>UserProfile</div>'
}
;
const
UserPosts
=
{
template
:
'<div>UserPosts</div>'
}
;
const
UserNull
=
{
template
:
'<div>UserNull</div>'
}
//嵌套路由的组要配置是在这里
//在里边加入childern[]来配置多个嵌套的路由。
//可以配置一个空，来避免没有参数时的错误。
const
routes
=
[
{
path
:
'/user/:id'
,
component
:
User
,
children
:
[
{
path
:
''
,
component
:
UserNull
}
,
{
path
:
'profile'
,
component
:
UserProfile
}
,
{
path
:
'posts'
,
component
:
UserPosts
}
]
}
]
;
const
router
=
new
VueRouter
(
{
routes
}
)
;
const
app
=
new
Vue
(
{
el
:
'#app'
,
router
}
)
;
|
编程式导航
我们在JavaScript中写业务逻辑时，进场需要跳转页面，比如我们在登陆时，输入了用户名和密码点击登录按钮，如果登陆成功我们需要跳转新内容。这时候就需要通过编写代码来实现。
router.push(location)
想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to=”…”>等同于调用router.push(…);
|
1
2
3
4
5
6
7
8
|
//字符串
router
.
push
(
'home'
)
;
//对象
router
.
push
(
{
path
:
'home'
}
)
;
//命名的路由
router
.
push
(
{
name
:
'user'
,
params
:
{
userId
:
123
}
}
)
//带查询参数，变成 /register?plan=private
router
.
push
(
{
path
:
'register'
,
query
:
{
plan
:
'private'
}
}
)
|
router.replace(location)
跟router.push很像，唯一的不同就是，它不会向history添加新纪录，而是跟它的方法名一样–替换掉当前的history记录。
命名视图
有时间想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar和main两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view 没有设置名字，那么默认为default。
下边就是官方提供的例子：
html文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
VueJS
</title>
<script src="./vue.js" ></script>
<script src="./bower_components/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div
id
=
"app"
>
<div
id
=
"app"
>
<h1>
Named Views
</h1>
</div>
<ul>
<li>
<router-link
to
=
"/"
>
/
</router-link>
</li>
<li>
<router-link
to
=
"/other"
>
/other
</router-link>
</li>
</ul>
<router-view
class
=
"view one"
>
</router-view>
<router-view
class
=
"view two"
name
=
"a"
>
</router-view>
<router-view
class
=
"view three"
name
=
"b"
>
</router-view>
</div>
<script src="./index.js"></script>
</body>
</html>
|
js文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
const
Foo
=
{
template
:
'<div>foo</div>'
}
const
Bar
=
{
template
:
'<div>bar</div>'
}
const
Baz
=
{
template
:
'<div>baz</div>'
}
const
router
=
new
VueRouter
(
{
mode
:
'history'
,
//一个视图使用一个组建渲染，
//因此对于同个路由，多个视图就需要多个组件。
//确保正确使用components 配置（带上s）
routes
:
[
{
path
:
'/'
,
components
:
{
default
:
Foo
,
a
:
Bar
,
b
:
Baz
}
}
,
{
path
:
'/other'
,
components
:
{
default
:
Baz
,
a
:
Bar
,
b
:
Foo
}
}
]
}
)
;
new
Vue
(
{
router
,
el
:
'#app'
}
)
;
|
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
