vue路由

Vue的路由配置

由 拜拜、爱过 提交于 2019-11-27 05:59:41
设置路由界面router.js import 和 设置 routes import Vue from 'vue' import vuerouter from 'vue-router' import firstpage from '../components/routerpage/index' import active from '../components/routerpage/active.vue' let router = new vuerouter ( { mode : "history" , routes : [ //配置路由 { path : "/" , name : "firstpage" , component : firstpage } , { path : "/active" , name : "active" , component : active } ] } ) ; Vue . use ( vuerouter ) ; export default router ; 对应action { title : "电影" , img : "../../../public/img/ymiao.png" , activeimg : "../../../public/img/miao.png" , action : "/" , useractive : true } ,

Vue常见问题总结

由 北战南征 提交于 2019-11-27 05:24:15
1、active-class是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上 /:id。使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？ 答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ 答：css的预编译。 使用步骤： 第一步：用npm 下三个loader（sass-loader、css-loader、node-sass） 第二步：在build目录找到webpack.base.config.js

Vue路由vue-router

由 岁酱吖の 提交于 2019-11-27 04:39:20
router介绍 router是一个被vue官方收纳的插件，在我们项目建完之后就会出现一个 router.js文件，我们只需要在这个文件下配置相应的路由，就可以实现 url与页面一一对应的关系 router配置 import About from "./views/About"; //先导入 Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/about', // url的路径 name: 'about', // url对应的名字，可以用作反向解析 component: About // template解析 }, { path: '/goods', name: 'goods', component: () => import('@/views/Goods.vue') //直接通过这种导入返回给component } ] 上面的两种导入方式，建议使用第一种 router使用 下面所有使用的路由均用上面配置的路由 基本使用 1. 首先在根组件下面配置<router-view /> <template> <div id="app"> <router-view/> <!--用来解析不同路由对应的template到这-->

day80-vue

由 拥有回忆 提交于 2019-11-27 03:23:36
vue路由name的使用 #路由配置 import Main from './views/Main' routes: [ { path: '/main', name: 'main', component: Main } ] #视图使用 <router-link :to="{name: 'main'}">主页</router-link> <!--注：如果to后面没值，路由就变成之前点击的路由--> router-link与系统a标签的区别 router-link： 　　会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换 <a>： 　　也可以完成同样的效果，但是会发生页面的转跳，并且效率低 路由的重定向 routes: [ { path: '/', name: 'home', component: Home }, { path: '/home', redirect: '/', 　　// 重定向 } ] 来源： https://www.cnblogs.com/klw1/p/11341652.html

Vue 路由懒加载

由 喜你入骨 提交于 2019-11-27 02:53:30
路由和组件的常用两种懒加载方式： 1、 vue异步组件实现路由懒加载 　　component：resolve=>(['需要加载的路由的地址'，resolve]) 2、 es提出的import(推荐使用这种方式) 　　 const HelloWorld = （）=>import('需要加载的模块地址') 详情参考网络连接： https://www.cnblogs.com/-roc/p/9983177.html 来源： https://www.cnblogs.com/jiaqi1719/p/11339556.html

【Vue路由系统详述】

由 时间秒杀一切 提交于 2019-11-27 02:52:26
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://106.13.73.98/__/55/ 一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter. VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js @ * VueRouter实现原理：** ==根据锚点值的改变，修改组件内容.== 我们先来看看不使用VueRouter，自己实现路由的控制，如下代码： <body> <div id="app"></div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { // vue-router的实现原理是根据锚值的改变来对页面进行切换 switch (location.hash) { case '#/login': oDiv.innerHTML=`<h1>我是登陆页面</h1>`; break; case '#/register':

Vue配置路由和传参方式及路由守卫！

由 南楼画角 提交于 2019-11-27 01:04:33
安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let routes = [ {...}, {...} ] 上列匹配规则中 对象有如下属性 path : 路由路径 component : 所加载的组件 name : 别名 redirect : 重定向 children : 子级路由 创建路由实例 let router = new VueRouter({ routes : routes //routes属性值应该为上述路由匹配规则数组 }) 将路由实例注入到初始化代码中 let app = new Vue({ data:..., router : router }) 跳转: 标签跳转 <router-link to="" ></router-link> 该标签拥有属性 to : 目标路径 也可以是对象 tag: 指定该标签解析成实际的标签类型 activeClass: 指定选中时的class名 js跳转(编程式导航) 在组件内: this.$router.push() this.$router.replace() this.$router.go() 前进或者后退 正前负退 路由传参 传统search传参(?号传参) 传送数据 标签传参

vue面试题（一）

由 半世苍凉 提交于 2019-11-27 00:25:47
1.v-show与v-if的区别 v-show：操作的是元素的display属性 v-if：操作的是元素的创建和插入 v-if有更高的开销，而v-show有更高的初始化渲染开销，如果需要非常频繁地切换， 则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好 使用场景： v-show：前台数据的展示 v-if：管理系统权限列表地展示 2.methods、computed、watch三者区别 三者之间地共同点：methods、watch和computed都是以函数为基础的 computed与watch都是以Vue的依赖为基础，当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动 methods里面是用来定义函数的，需要手动才能执行，不像computed与watch“自动执行”函数 三者之间的不同点： computed： 1.computed是一个计算属性，computed所依赖的属性发生变化时，计算属性才会重新计 算，并进行缓存。当其他数据发生改变的时候，computed属性不会重新计算。从而提升 性能 watch： 1.watch类似与事件监听+事件机制 2.watch的方法默认是不会执行的，只有所依赖的属性发生变化才会执行的 3.watch默认第一次是不会执行的，通过声明immediate选项为true，可以立即执行一次 handler 4

【Vue路由系统详述】 -- 2019-08-11 18:50:30

由 為{幸葍}努か 提交于 2019-11-27 00:06:13
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://106.13.73.98/__/55/ 一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter. VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js @ * VueRouter实现原理：** ==根据锚点值的改变，修改组件内容.== 我们先来看看不使用VueRouter，自己实现路由的控制，如下代码： <body> <div id="app"></div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { // vue-router的实现原理是根据锚值的改变来对页面进行切换 switch (location.hash) { case '#/login': oDiv.innerHTML=`<h1>我是登陆页面</h1>`; break; case '#/register':

vue面试题

由 非 Y 不嫁゛ 提交于 2019-11-26 23:53:13
要招一个会vue的开发者： 作为 面试官 的你，你还会每次都只是问这些老土的问题吗？ 你对MVVM的理解是什么？ 你知道什么是双向绑定吗？你了解它的原理吗？ 说说vue的生命周期有哪些？ 组件通讯有哪些？ 你用过vuex吗？ ... 作为 面试者 的你，在网上搜索下“vue面试题及答案”，看完后你是不是觉得： 自己掌握了武林秘籍？ 能忽悠住面试官了？ 我熟练掌握vue了？ 记一次印象深刻的面试 面试过很多小伙伴（要招会vue的开发者），没工作经验的，5年工作经验的，甚至10多年工作经验的...让我印象最深，也觉得最为经典的一个面试： 有一天，来了一位5年前端工作经验的小伙子，在很多项目中使用过vue的面试者，故事就从这里开始了： （开篇省略N多对话……） 我 ：看你简历上说你在项目中有用到过vue对吗？ 小伙子 ：有啊，我们项目中就有用到过…… 我 ：你认为你对vue的理解到什么程度？（对自我的认知） 小伙子 ：做过很多项目，基本上都了解了，很熟练 我 ：不错，那我问下你 “vue为什么要求组件模板只能有一个根元素？” 小伙子 ：恩……没在意过 我 ：没关系，那 “你了解vue的diff算法吗？” 小伙子 ：恩……没用到过 我 ：没事，那我再问下你，“在.vue文件中style是必须的吗？那script是必须的吗？为什么？” 小伙子 ：恩……(此时小伙子有点着急了，说) 小伙子
订阅 vue路由