vue路由

VUE—底部导航路由切换时更换图片 第一步： 布局 给每个底部导航路由都绑定一个点击事件，不要绑定在router-link上，那样会不生效，并且动态的添加图片路径 v-for也行，那样需要动态的绑定方法，可参考 v-for时动态绑定函数 <mt-tab-item> <router-link to="/Home"> <div @click="homeFn"> <img :src="homeUrl" alt=""> <p>首页</p> </div> </router-link> </mt-tab-item> <mt-tab-item> <router-link to="/Discover"> <div @click="discoverFn"> <img :src="discoverUrl" alt=""> <p>发现</p> </div> </router-link> </mt-tab-item> <mt-tab-item> <router-link to="/Photo"> <img src="@/assets/img/photo.jpg" alt=""> </router-link> </mt-tab-item> <mt-tab-item> <router-link to="/Message"> <div @click="messageFn"> <img :src=

在vue-cli3，如果想使用路由，就要先创建一个router.js文件，与main.js平级 如图： 然后配置router.js import Vue from 'vue'import Router from 'vue-router'//组件模块import Pagea from './pages/pagea'import Pageb from './pages/pageb'Vue.use(Router);export default new Router({ routes: [ {path: '/pagea', name:'Pagea',component: Pagea}, {path: '/pageb',name:'Pageb',component: Pageb}, {path: '/',redirect:'/pageb'} ]}) 这里我用的是我自己学习路由用的 main.js中要加入 import router from './router' Vue.use(router);new Vue({　　...,　　router}) 接下来在页面中引进路由 <router-link to="/pagea">组件内跳向第一个页面</router-link> <router-link>是vue-cli中路由的标签，to就是之前router.js中的path字段。 在需要展示的地方

　　上一篇我们简单的看了看vue的基本用法，就是三步，首先就是用<script>标签引入vue的依赖，然后就是写html标签，在标签中用vue指令绑定一些属性，最后就是new Vue(xxx)实例，在这个实例中有很多的实例属性可以给html标签中那些绑定的属性赋值、或者是绑定事件函数； 　　这一篇我们来说说vue-cli这样的一个脚手架，快速搭建一个vue项目，注意我们的这个脚手架可以直接用npm下载，换句话的意思就是必须要有node环境，这里配置node的环境就不多说了。。。 　　vue-cli版本是2.x，现在有3.x版本的，目录和2.x版本的有一些区别，有兴趣的可以去看看 1.搭建vue-cli项目 　　如果你的node安装好了而且环境变量配置好了，那么输入以下指令应该有类似这样的输出 　　然后我们运行 npm install -g vue-cli ，全局安装一个vue-cli的模块，因为我们要经常使用的，全局安装只用下载一次就行了，以后就可以直接用，那么vue-cli具体的是下载到什么地方去了呢？默认安装在C盘对应的用户下的AppData目录下，我的目录是C:\Users\admin\AppData\Roaming\npm\node_modules，下图所示，这个安装路径就用默认的就行，想要自己修改的话可以自己搜索方法 　　只要是npm install -g xxx

最近在用iview做项目，需要实现登录，注册，忘记密码等功能。iview-admin本来就有登录功能，于是想照葫芦画瓢，实现登录界面的注册，忘记密码页面路由跳转。 router.js里路由配置，刚开始的写法是line28和line38，导入组件，其结果是地址栏实现了路由跳转，但是页面却是一片空白。将其改为line29行的导入形式，就可以实现路由切换了。最后发现原来是自己的component后面多了个s 两种方法都可以！！！！！ components:() => import('@/view/login/register.vue') component:register => require(['@/view/login/register.vue'], register) vue-router官方文档 来源： https://www.cnblogs.com/sweetC/p/11934423.html

首先安装vue路由 cnpm install vue-router 接着在src目录下创建一个router.js文件 在router.js中引入vue-router import Router from 'vue-router'; import Vue from 'vue'; 如下图所示 注:resolve => require([],resolve)为懒加载 可以封装成一个公共函数引入到router.js中就不用重复书写 可以在routes中写上mode:"history"去掉地址中的“#” 最后在main.js中引入router 来源： https://www.cnblogs.com/wazy999/p/11931514.html

vue通过多种方式可以将组件挂载到一个页面上。挂载方式有四种。其实也并不止四种。这里呢就简单的提四种方式去怎样挂载组件。 第一种就是作为标签形式挂载。前面也提到。 后面的就是一般的挂载组件和按需挂载组件懒加载挂载组件。用的比较多的就是后面的两种。 1.懒加载模式下的组件加载： 1）第一步还是先创建vue组件。可以创建在views和components中，都可以。不要求严格。 2）创建完成后就配置路由。 　　法一： const routes = [ { path: '/', name: 'top', component: () => import('../components/common/top') }] 　　法二： Vue.use(VueRouter)const top = r => require.ensure([], () => r(require('../components/common/top')), 'top')const routes = [ { path: '/', component: top }] 　　法三： import Top from '../components/common/top'Vue.use(VueRouter)const routes = [ { path: '/', component: Top }]

1. v-bind和v-model的区别？ v-bind用来绑定数据和属性以及表达式，缩写为'：' v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用 2. Vue 中三要素的是什么？ 2.1 响应式 // 如何让实现响应式的呢？ let obj = {}; let name = 'zhangsan'; Object.defineProperties(obj, name, {get : function() { console.log('name' , name) }, set : function() { console.log('name' , name) }}) // 1. 关键是理解Object.defineProperty // 2. 将data的属性代理到vm上面的 let mv = {}; let data = { price: 100, name: 'zhangsan' }; for (let key in data) { (function (key) { Object.defineProperty(mv, key, { get: function () { console.log('get val'); return data[key]; }, set: function (val) { console.log('set val');

第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; 按需引入 底下会写到懒加载路由 export default new Router({ routers: [{ path: "router", component: '', meta: {} children: [{ path: 'router1', component: Router1 }, { path: 'router2', component: Router2 } ] }] })在main.js中 import router from './router' //引入 //使用 new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) 正式入代码环节~ 组件: <template> <div class="router"> <h3>路由基本使用</h3> </div> </template> <script> export default

安装 # 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。 你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。 在 Vue 后面加载 vue-router ，它会自动安装的： <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script> NPM 安装 npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 如果使用全局的 script 标签，则无须如此 (手动安装)。 构建开发版本 如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 vue-router 。 git clone https://github.com/vuejs/vue

动态路由 路由组件是 vue-router 动态路由即从后端请求路由信息，然后转化生成路由信息。所以这里的关键是不会提前知道什么菜单对应什么组件，因此路由声明的时候不再是写死的组件，而是可替换的动态路径。相关的功能就是 路由懒加载 ，以及 异步组件 具体过程就是 导航守卫 的前置守卫中，根据是否登录来判断是否请求用户信息以及路由信息，再将请求的路由信息转化成路由，最后添加到路由表 router.beforeEach((to, from, next) => { if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息，得到用户信息后立即请求路由信息 store .dispatch('GetUserInfo') .then(res => { // 拉取user_info const roles = res.data.Data.Roles // note: roles must be a array! such as: ['editor','develop'] store .dispatch('GenerateRoutes', { roles }) .then(() => { // 执行GenerateRoutes动作后，store.getters.addRouters得到的就是内置的路由以及请求的路由的集合