Vue怎么做实现路由跳转和嵌套

核心提示在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。index.html,只有一个路由出口[html] view

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。

index.html,只有一个路由出口

[html] view plain copy

<div id="app">

<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

</div>

main.js,路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。

[html] view plain copy

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

//引入两个组件

import home from "./home.vue"

import game from "./game.vue"

//定义路由

const routes = [

{ path: "/", redirect: "/home" },//重定向,指向了home组件

{

path: "/home", component: home,

children: [

{ path: "/home/game", component: game }

]

}

]

//创建路由实例

const router = new VueRouter({routes})

new Vue({

el: '#app',

data: {

},

methods: {

},

router

})

home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。

[html] view plain copy

<template>

<div>

<h3>首页</h3>

<router-link to="/home/game">

<button>显示<tton>

</router-link>

<router-view></router-view>

</div>

</template>

game.vue

[html] view plain copy

<template>

<h3>游戏</h3>

</template>

运行后的结果:

点击显示后:

vue项目 ipad禁止竖屏方法如下:

1,在主屏幕或应用内上滑打开控制中心。

2,将屏幕方向锁定关闭即可。

ipad代表苹果平板,与iPhone布局一样,提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。iPad是由苹果公司于2010年开始发布的平板电脑系列,定位介于苹果的智能手机iPhone和笔记本电脑产品之间,(屏幕中有4个虚拟程序固定栏)与iPhone布局一样,提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。

 
友情链接
鄂ICP备19019357号-22