vue中嵌套路由

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="./lib/vue.js"></script>

<script src="./lib/vue-router.js"></script>

</head>

<body>

<div id="app">

<router-link to="/genmulu">根目录内容</router-link>

<router-view></router-view>

</div>

<template id="genmu">

<div>

<h2>这是根目录显示的内容</h2>

<router-link to="/genmulu/login">登陆</router-link>   //这里面进行页面跳转的需要将前面的父级路由带上

<router-link to="/genmulu/resigest">注册</router-link>

</div>

</template>

<script>

// 1、定义两个组件

var genmulu = {

template: "#genmu"

}

var login = {

template: "<h2>登陆里面的子组件</h2>"

}

var zuche = {

template: "<h2>注册里面的子组件</h2>"

}

// 2、new一个路由规则

var routerobj = new VueRouter({

routes: [

{

path: ‘/genmulu‘,

component: genmulu,

children: [                 //使用children 为数组,里面可以有路由规则对象,path后面不用带/,(/代表根目录,由于我们是路由嵌套,而是不是针对根目录的路径,所以children里面的路由规则对象不需要带/)

{ path: ‘login‘, component: login },

{ path: ‘resigest‘, component: zuche }

]

}

]

})

var vm = new Vue({

el: "#app",

data: {},

methods: {},

router: routerobj   //挂载路由规则

})

</script>

</body>

</html>

代码有点问题还在处理中,有时间就在在敲一遍

原文地址:https://www.cnblogs.com/Progress-/p/12209158.html

时间: 2024-11-08 01:40:04

vue中嵌套路由的相关文章

vue中嵌套页面 iframe 标签

vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe> src可以使用相对路径,也可使用服务器根路径http:localhost:8088/-等: <ifr

vue基础——嵌套路由

嵌套路由是非常常用的,一开始没仔细看过文档的时候踩过小坑,一是子路由的path里,不要加/了,直接写子路由的部分,路由的前半部分是直接从父路由中继承到了,二是对<router-view></router-view>组件渲染位置的理解 参考文档:https://router.vuejs.org/zh/guide/essentials/nested-routes.html 原文地址:https://www.cnblogs.com/chaoyueqi/p/10244503.html

六、Vue Router 嵌套路由

嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中

vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 window 3. window.location.hash 4. hash 是属于 window.location 这个对象,而history直接属于 window 5. window.history 6. 是因为路由模式下,当hash值发生改变,不会发生网络请求,但是href会,vue会自动监听hash

vue 中简单路由的实现

1. 引入vue-router,如果是在脚手架中,引入VueRouter之后,需要通过Vue.use来注册插件``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)```2. 创建router路由器``` new Router(options)```3. 创建路由表并配置在路由器中``` var routes = [ {path,component}//path为路径,component为路径对应的路由组

Vue中解决路由切换,页面不更新的实用方法

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

Vue中router路由异步加载组件-优化性能

何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加载小的js文件的开销大:所以当首页一次性加载的文件太大时,可以使用异步加载组件的写法. 原先写法: 异步加载写法: 不仅路由内可以使用异步加载,组件内也可使用异步加载,建议只有当app.js大于1M时再使用: 原文地址:https://www.cnblogs.com/nayek/p/11824987

vue中keep-alive路由缓存

<keep-alive> <component v-bind:is="view"></component> </keep-alive> 专属生命周期 activited keep-alive专属,组件被激活时调用 deadctivated keep-alive专属,组件被销毁时调用 用于子组件缓存,可以让子组件缓存还是不缓存 <!-- 失活的组件将会被缓存!--> <keep-alive> <componen

vue中如何不通过路由直接获取url中的参数

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.