vue 2.0路由之路由嵌套示例详解
前言
vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。
方法如下：
1、引入依赖库就不必再说
2、创建组件
两种写法
第一种：间接
<template id="home">
<div>
<h1>Home</h1>
<p>{{msg}}</p>
</div>
</template>
var About = Vue.extend({
template: '#about'
});
第二种：直接
var Out = Vue.extend({
template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'
});
3、创建 router 实例，传 'routes'路由映射配置
var router = new VueRouter({
routes: [
{ path: '/路径', component: 组件名 },
{ path: '/', component: 组件名}, //设置默认路径
{ path: "*", component:Home }//路径不存在 <br> ]
});
4、创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
var vm = new Vue({
router: router
}).$mount('#app');
整体的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>
<!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
<router-link to="/home">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-link to="/out">Go to Out</router-link>
</div>
<!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
<!--这里显示的是展示的界面-->
<router-view></router-view>
</div>
<template id="home">
<div>
<h1>Home</h1>
<p>{{msg}}</p>
</div>
</template>
<template id="about">
<div>
<h1>about</h1>
<p>This is the tutorial about vue-router.</p>
</div>
</template>
<!-- 0、引入依赖库 -->
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 1、创建组件 */
var Home = Vue.extend({
template: '#home',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
});
var About = Vue.extend({
template: '#about'
});
var Out = Vue.extend({
template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'
});
// 2. 创建 router 实例，然后传 `routes`路由映射 配置
var router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/out', component: Out },
{path: '/', component: Home },//设置默认路径
{ path: "*", component:Home }//路径不存在
]
});
// 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
var vm = new Vue({
router: router
}).$mount('#app');
// 现在，应用已经启动了！
</script>
</body>
</html>
关于路由嵌套
在配置routes映射时添加children配置
如下：
var router = new VueRouter({
routes:[
{path:'/home',component:Home,
children:[//子路由
{path:'news',component:News},
{path:'change',component:change}
]},
{path:'/me',component:Me},
{path:'/',component:Me}
]
})
关于具体的demo可以参考GitHub上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Vue 多层组件嵌套二种实现方式(测试实例)
最近在研究vue组件的学习,给自己留个笔记,也分享给大家,希望能对大家有所帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> &
-
Vue实现路由跳转和嵌套
一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h
-
vue-router：嵌套路由的使用方法
模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路
-
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
前言 最近练习Vue,看到官方文档中的嵌套路由,不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅. demo截图: Demo简单介绍 主路由:Top250(charts),正在热映(hot),即将上映(ing),新片榜(newmovie) const router = new VueRouter({ routes: [ { path: '/', //设置默认路由为Top250 compon
-
VUE多层路由嵌套实现代码
先看看效果图: 例如:在做系统时,主页面有两个功能[home]and[news],在[home]下又分为登录和注册. 首先需要将各种模板进行抽离.定义模板 <template id="home"> //home模板,里面含子视口 <div> <router-link to="/home/login">登录</router-link> <router-link to="/home/zhuce"&
-
详解vue父子模版嵌套案例
这里是父子模版的调用 这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 :http://vuefe.cn/guide/ vue-router2.0: https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种,子组件模版直接写在js里 //定义模版挂载点my-component <div id="exampleBox1"> <com-ponent></co
-
详解vue嵌套路由-params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]
-
vue动态路由实现多级嵌套面包屑的思路与方法
前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0
-
详解vue嵌套路由-query传递参数
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo
-
vue cli4下环境变量和模式示例详解
本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con
-
Vue.extend实现组件库message组件示例详解
目录 概述 Vue.extend message 组件配置对象(就是.vue文件) message 生成组件的函数 使用方法 效果图 总结 概述 当我们使用组件库的时候,某些组件并不是直接放到模板当中进行使用,而是通过api的方式调用生成组件并且挂在到我们的页面中,其中最常见的就是message组件,我们在组件库中看到的多数都是api调用的方式生成.记录自己基本实现message组件. Vue.extend 在vue中,要实现通过api方式实现组件的使用,这个aip是必不可少的,因此我们先了解下
-
vue 2.0项目中如何引入element-ui详解
前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)
-
Vue中关于this指向的问题示例详解
目录 由Vue管理的函数 不被vue管理的函数 this指向大致分类 总结 在Vue中,方法体里用this调用vue实例的数据,有时会指向window,导致调用失败报错. 由Vue管理的函数 例如: computed 计算属性 watch 监视属性 filters (Vue3中已弃用且不再支持) 过滤器.... 上述属性里配置的函数不要采用箭头函数写法,因为箭头函数没有自己的this对象,使用this时会向外找到window,不会指向Vue实例,也就调用不到Vue中的数据. 不被vue管理的函数
-
vue 2.0路由之路由嵌套示例详解
前言 vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍. 方法如下: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> var About = Vue.extend({ te
-
Laravel源码解析之路由的使用和示例详解
前言 我的解析文章并非深层次多领域的解析攻略.但是参考着开发文档看此类文章会让你在日常开发中更上一层楼. 废话不多说,我们开始本章的讲解. 入口 Laravel启动后,会先加载服务提供者.中间件等组件,在查找路由之前因为我们使用的是门面,所以先要查到Route的实体类. 注册 第一步当然还是通过服务提供者,因为这是laravel启动的关键,在 RouteServiceProvider 内加载路由文件. protected function mapApiRoutes() { Route::pref
-
VUE使用localstorage和sessionstorage实现登录示例详解
目录 正文 localstroage就是一个加强版的COOKIE. 三者的异同 localStorage和sessionStorage操作 登录实例: Router.js 正文 今天这篇日志记录下做VUE登录的血泪史(VUE2). 当时也不知道是咋想的,就认为php给VUE提供接口,可能session就不起作用了(现在的登录是用SESSION做的). 可是登录需要做呀,用什么存储登录的用户信息呢.最开始我还真想过用COOKIE,但是安全性得不到保证,因为在每次HTTP请求的时候,都会把cooki
-
vue最简单的前后端交互示例详解
一.学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳
-
vue 内置组件 component 的用法示例详解
目录 component is 内置组件切换方法一: component is 内置组件切换方法二: component is 内置组件切换方法一: component组件(单独拿出一个组件来专门进行切换使用) 使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template>
-
Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t