黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 四 [打印本页]

---

作者: 我是楠楠    时间: 2019-12-25 14:30
标题: 【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 四

【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 四

3.4 路由
3.4.1 基础路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
Nuxt.js根据pages的目录结构及页面名称定义规范来生成路由，下边是一个基础路由的例子：
假设 pages 的目录结构如下：

[AppleScript] 纯文本查看 复制代码

pages/

‐‐

| user/

‐‐‐‐‐

| index.vue

‐‐‐‐‐

| one.vue 

那么，Nuxt.js 自动生成的路由配置如下：

[AppleScript] 纯文本查看 复制代码

router: {

routes: [

{

name:

'

user

'

,

path:

'

/user

'

,

component:

'

pages/user/index.vue

'

},

{

name:

'

user

‐

one

'

,

path:

'

/user/one

'

,

component:

'

pages/user/one.vue

'

}

]

}

index.vue代码如下：

[AppleScript] 纯文本查看 复制代码

 <template>

<div>

用户管理首页

</div>

</template>

<script>

export default{

layout:

"

test

"

}

</script>

<style>

</style> 

one.vue代码如下：

[AppleScript] 纯文本查看 复制代码

 <template>

<div>

one页面

</div>

</template>

<script>

export default{

layout:

"

test

"

}

</script>

<style>

</style>

分别访问如下链接进行测试：
http://localhost:10000/user
http://localhost:10000/user/one
3.4.2 嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：

[AppleScript] 纯文本查看 复制代码

pages/

‐‐

| user/

‐‐‐‐‐

| _id.vue

‐‐‐‐‐

| index.vue

‐‐

| user.vue 

Nuxt.js 自动生成的路由配置如下：

[AppleScript] 纯文本查看 复制代码

 router: {

routes: [

{

path:

'

/user

'

,

component:

'

pages/user.vue

'

,

children: [

{

path:

''

,

component:

'

pages/user/index.vue

'

,

name:

'

user

'

},

{

path:

'

:id

'

,

component:

'

pages/user/_id.vue

'

,

name:

'

user

‐

id

'

}

]

}

]

} 

将user.vue文件创建到与user目录的父目录下，即和user目录保持平级。

[AppleScript] 纯文本查看 复制代码

 <template>

<div>

用户管理导航，<nuxt

‐

link :to

=

"'

/user/101

'"

>修改</nuxt

‐

link>

<nuxt

‐

child/>

</div>

</template>

<script>

export default{

layout:

"

test

"

}

</script>

<style>

</style> 

_id.vue页面实现了向页面传入id参数，页面内容如下：

[AppleScript] 纯文本查看 复制代码

 <template>

<div>

修改用户信息{{id}}

</div>

</template>

<script>

export default{

layout:

"

test

"

,

data(){

return {

id:

''

}

},

mounted(){

this.id

=

this.

$route.

params.id;

console.log(this.id)

}

}

</script>

<style>

</style> 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2