zoukankan      html  css  js  c++  java
  • vue简单路由(二)

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

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

    <div id="app">
    	<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    	<router-view></router-view>
    </div>

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

    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,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。

    <template>
    	<div>
    		<h3>首页</h3>
    		<router-link to="/home/game">
    			<button>显示<tton>
    		</router-link>
    		<router-view></router-view>
    	</div>
    </template>

    game.vue

    <template>
    	<h3>游戏</h3>
    </template>


    运行后的结果:

    点击显示后:

  • 相关阅读:
    mysql 库,表,数据操作
    mysql 初识数据库
    MySQL 索引 视图 触发器 存储过程 函数
    MySQL 事物和数据库锁
    MySQL 约束和数据库设计
    MySQL 创建千万集数据
    MySQL 各种引擎
    求1,1,2,3,5,8,13 斐波那契数列第N个数的值
    WEB前端研发工程师编程能力成长之路(1)
    XML DOM
  • 原文地址:https://www.cnblogs.com/dwj88/p/7877881.html
Copyright © 2011-2022 走看看