时间:2021-05-18
这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。
项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件。
文件内容:
npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource)
import Vue from 'vue' import Router from 'vue-router' (----引入路由---注释说明) import About from '@/components/about'(--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块) import Home from '@/components/home' import Brand from '@/components/brand' import Company from '@/components/company' import Connect from '@/components/connect' import Main from '@/components/main' import Join from '@/components/join' import News from '@/components/news' import Products from '@/components/products' import son1 from '@/components/son1' import son2 from '@/components/son2' import list from '@/components/list' import newList from '@/components/newList' import culture from '@/components/culture' import certification from '@/components/certification' import zhuanjia from '@/components/zhuanjia' Vue.use(Router) (--使用---) export default new Router({ routes: [ { path: '/main', name: 'main', component: Main },-------------------------------- { path: '/', 这里是路由重定向,比如页面加载时候进入首页 redirect: '/main' (比如给路由一个选中后的样式为红色 那么这里就能用到了---.router-link-active{样式}) },--------------------------------- {---------------------这里是配置子路由 path: '/brand', name: 'brand', component: Brand, children: [ { path: '/', name: 'newList', component: newList }, { path: '/brand/culture', name: 'culture', component: culture }, { path: '/brand/certification', name: 'certification', component: certification }, { path: '/brand/zhuanjia', name: 'zhuanjia', component: zhuanjia } ] }, { path: '/about', name: 'about', component: About }, { path: '/company', name: 'company', component: Company }, { path: '/connect', name: 'connect', component: Connect }, { path: '/home', name: 'home', component: Home }, { path: '/join', name: 'join', component: Join, children: [ { path: '/', name: 'son1', component: son1 }, { path: '/join/son2', name: 'son2', component: son2 } ] }, { path: '/list', name: 'list', component: list }, { path: '/news', name: 'news', component: News }, { path: '/products', name: 'products', component: Products } ] })接下来就是在每一个模块文件中加入这样的一句话暴露出去:
在app中我们可以这样写:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在vue2.0中引用element-ui组件库element-ui是由饿了么团队开发的一套基于Vue2.0的桌面端组件库。官网:http://element.e
在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。分为全局导航钩子,单个路由独享的钩子,组件内钩子。三种类型的钩子只是用的
分享前啰嗦我之前介绍过vue1.0如何实现observer和watcher。本想继续写下去,可是vue2.0横空出世..所以直接看vue2.0吧。这篇文章在公司
问题描述:在vue2.0的以上的版本,vue-cli的build的文件夹下没有dev-server.js文件,那怎么配置mock数据Vue2.x在build下的
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:Vue2.0组件之间数据交互和通信。Vue2.0废弃了dispatch