vue路由

　　虽然Vue.js未提供路由功能，但是官方推出了Vue Router（即vue-router库），以插件的形式支持。它与Vue.js深度集成，可快速的创建单页应用（Single Page Application，SPA）。 一、基本用法 　　首先需要引入vue和vue-router两个库，如果像下面这样全局引用（即存在全局变量Vue），那么vue-router会自动调用Vue.use()方法注册其自身；但如果以模块的方式引用，那么就得显式地调用Vue.use()。 <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> 　　然后添加两个内置的组件，第一个是导航用的router-link组件，它默认会被渲染成<a>元素，如果要渲染成其它元素，那么可以使用它的tag属性；第二个是路径匹配时用于渲染视图的router-view组件，它还是一个函数式组件，如下所示。 <div id="container"> <router-link to="/main">首页</router-link> <router-link to="/list">列表</router-link> <router-view></router-view> </div> 　　再声明要渲染的组件，这些组件会与指定的路由映射

vue路由：可以动态的往根组件里挂载组件 在学习vue路由时，记录一下vue的路由配置过程： 1.安装 npm install vue-router --save / cnpm install vue-router --save 2、引入并 Vue.use(VueRouter) (main.js) import VueRouter from 'vue-router' Vue.use(VueRouter) 3、配置路由 1、创建组件 引入组件 2、定义路由 （建议复制s） const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] 3、实例化VueRouter const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) 4、挂载 new Vue({ el: '#app', router， render: h => h(App) }) 5 、根组件的模板里面放上这句话 <router-view></router-view> 6、路由跳转 <router-link to="/foo">Go to Foo<

vue项目搭建和项目目录介绍、组件、路由 Vue项目环境搭建 1.安装node，官网下载，安装到本地 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2.下载node后，便能获得npm（npm相当于一个应用商城，与后端python中的pip类似） 由于使用npm下载插件是用的外网，下载速度慢，所以建议换源安装 cnpm （cmd窗口下进行换源） >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3.换源安装cnpm后，下一步下载 脚手架 >: cnpm install -g @vue/cli 注：如果在第二或第三步安装失败时，可先清空 npm缓存后，再重复执行下载，清空缓存如下： >: npm cache clean --force Vue项目搭建 1.先将cmd切换到要下载的指定目录下（如下:表示将创建的项目存在桌面上) >:cd Desktop 2.创建项目 >:vue create 项目名 3.项目初始化，需要按步骤选择环境配置，按照如下配置即可 pycharm配置并启动vue项目 1.项目创建好后，用pycharm打开 2.添加配置npm启动，点击 + 号，找到 npm ，按下方配置 Vue项目目录介绍 ├── v-proj | ├── node_modules

1.场景模拟 现在我们来实现这样一个功能： 一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换： 1.1 编写父组件 为了让接下来的功能比较清晰，我们先新建一个文件夹：src 然后新建一个HTML文件，作为入口：index.html 然后编写页面的基本结构： <div id="app"> <span>登录</span> <span>注册</span> <hr/> <div> 登录页/注册页 </div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app" }) </script> 样式： 1.2 编写登录及注册组件 接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js： 编写组件，这里我们只写模板，不写功能。 login.js内容如下： const loginForm = { template:'\ <div>\ <h2>登录页</h2> \ 用户名：<input type="text"><br/>\ 密码：<input type="password">

VueRouter系列的文章示例编写时，项目是使用vue-cli脚手架搭建。 项目搭建的步骤和项目目录专门写了一篇文章： 点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境。 VueRouter系列文章链接 　　 《VueRouter爬坑第一篇》-简单实践 　　《VueRouter爬坑第二篇》-动态路由 　　《VueRouter爬坑第三篇》-嵌套路由 阅读目录 一.安装VueRouter 　　1.npm 安装VueRouter 　　2.如何使用VueRouter 二.组件和路由之间的映射 　　1.<router-link>编写可以跳转的url 　　2.编写跳转的目的组件 　　3.定义路由 　　4.入口文件main.js配置路由 　　5.配置组件渲染的位置 三.总结 一.安装VueRouter 1.npm 安装VueRouter 　　安装命令：npm install vue-router 　　 2.如何使用VueRouter 　　安装完成之后，需要有两个步骤才能使用 　　第一步：引入vue-router 　　　　 　　第二步：将组件注册到全局（全局注册后，在别的组件中可以直接使用，无需单独引入） 　　　 　　 这块先贴出步骤，暂时不写代码，后面做组件和路由映射的时候在把代码写上。 二.组件和路由之间的映射 　　接着我们的疑问就来了：

第一步：下载安装vue-router插件 npm install vue-router --save 以下都是在main.js中操作 第二步：在main.js文件中引入插件并且使用 import VueRouter from 'vue-router' Vue.use(VueRouter) 第三步：创建路由组件，在components文件夹中创建任意测试组件， 我创建的是 foo.vue 和bar.vue 然后import引入 第四步：（在main.js中进行操作） ①配置参数 const routes = [ {path:'/foo',component:foo} ] ② 实例化 vueRouter const router = new VueRouter({ routes}) //第五步中花括号里面的的routes要上面的同名 ③ 挂载路由 new Vue({ router, render: h => h(App), }).$mount('#app') 第五部： 接下来转移到App.vue 使用<router-link to="/foo"></router-link> 标签进行导航，to你在main.js里定义的path 加上标签 <router-view></router-view>渲染路由组件 App.vue <template> <div id="app"> <h1

ES6 常用语法 关键字 let/var let为作用域严格的var ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，都必须借助于function的作用域来解决应用外面变量的问题（闭包） const 定义常量，在定义时就必须赋值，若常量指向的是对象，则可以对对象的内部属性进行修改 对象增强写法 对象属性简写 let name = 'xiaoming' // ES6之前 let obj1 = { name: name } // ES6之后 let obj2 = { name } 对象方法简写 // ES6之前 let obj1 = { test: function () {} } // ES6之后 let obj2 = { test () {} } 循环遍历 普通的for循环 for (let i = 0; i < arrs.length; i++) { console.log(arrs[i]); } ES6 的for循环 for (let i in arrs) { console.log(arrs[i]); } for (let arr of arrs) { console.log(arr) } 字符串定义方式 ES6之前 用 + 连接 换行时末尾加 \ ES6之后 使用 `` 定义字符串可以直接换行 箭头函数 没有参数 const a = () => { }

目录 一、Vue项目介绍 二、组件相关知识点 三、路由相关知识点 路由配置 上一篇我们说了Vue项目平台搭建以及Vue项目目录说明，这篇我们说一下如何使用Vue项目进行前端项目开发 一、Vue项目介绍 Vue是一个单页面页用，我们用到的html在public文件夹下 入口文件 根组件 页面组件 路由配置文件 二、组件相关知识点 ''' 1、vue项目的请求生命周期：main.js完成环境的加载与根组件的渲染；router的index.js完成路由映射 2、<router-view />标签作为路由映射的页面组件占位符 3、组件的生命周期钩子： 一个组件，会在页面中渲染，也会销毁存放到内存(不渲染) => 加载组件到销毁组件 从加载一个组件到销毁该组件，整个生命周期中存在很多特殊的时间节点(组件要创建了，创建成功了，要加载了，加载成功了， 要更新数据了，数据更新完毕了，要销毁了，销毁成功了)，这些特殊的时间节点，vue都提供了对应的回调方法，来辅助完成在这些时间 节点需要完成的业务逻辑 生命周期钩子函数书写的位置：钩子直接作为vue实例的成员 重点：1、书写位置 2、每个钩子节点时的特性 ''' 三、路由相关知识点 ''' 1、<router-link></router-link>来完成路由的跳转(可以带参数可以不带参数, 需要在路由中配置) eg: <router-link :to

只写路由部分的相关内容 需引入路由包 import Vue from 'vue' // 1. 导入 vue-router 包 import VueRouter from 'vue-router' // 2. 手动安装 VueRouter Vue.use(VueRouter) // 导入 app 组件 import app from './App.vue' // 导入 Account 组件 import account from './main/Account.vue' import goodslist from './main/GoodsList.vue' // 3. 创建路由对象 var router = new VueRouter({ routes: [ // account goodslist { path: '/account', component: account }, { path: '/goodslist', component: goodslist } ] }) var vm = new Vue({ el: '#app', render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 router // 4.

搞了一下午，总算处理完了 首先：在要传出参数的页面利用路由传出参数 methods:{ ToDetil(id){ this.$router.push('/movie/detail/'+id)//在要传出参数的页面利用路由传出参数 } }, 其次 ：在路由文件中设置你要传的ID {path: '/movie/detail/:movieId', name: 'detail',component:detail,//设置要传的ID props:{ detail:true } }, 最后：在你所需要的页面得到你要的值 props:["ID"],//获取你要的值 this.$route.params.ID//得到你要的值 来源： https://www.cnblogs.com/lipu12281/p/11852024.html