vue-router
jiaojsun
做一只快乐的小码龙
展开
-
vue-router—8动态路径参数
routerApp.vueuser.vue<template> <div> 我是user <div class="user-list"> <router-link style="padding: 0px 20px" :to="{path: '/user/'+item.tip+'/...原创 2019-06-13 09:16:15 · 2550 阅读 · 0 评论 -
vue-router—常见面试t
1.嵌套路由怎么定义看一下教程中的案例。首先看一下最外面的路由也就是说在项目一开始,可以出现下面几种路径2.路由之间跳转声明式(标签跳转)编程时(js跳转)3.说一说懒加载(按需加载路由)4.vue-router有哪几种导航钩子5.完整的导航解析流程导航被触发。 在失活的组件里调用离开守卫。 调用全局的be...原创 2019-06-16 17:00:55 · 5679 阅读 · 0 评论 -
vue-router—17利用webpack实现懒加载(按需加载)
首先用一下视频中的方法也可以用这种方式(以下是官网原文)当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。首先,可以将异步组件定义为返回一个 Pr...原创 2019-06-15 17:54:02 · 340 阅读 · 0 评论 -
vue-router—16滚动动画
需求看下面,当我点击左侧的时候,右侧就会定位到某一块,看一下要怎么做docl.vue首先要对应好各自的hash值看一下完整的代码doc.vue<template> <div class="doc"> <div class="doc-nav"> <ul class="main-menu"&g...原创 2019-06-15 16:13:36 · 263 阅读 · 0 评论 -
vue-router—15面包屑导航设置
需求面包屑导航就是想实现下面一个功能,当我点击上面标题的时候,下面首页那块也跟着变化。看一下实现的代码,其实比较简单uijs原创 2019-06-15 15:41:00 · 1368 阅读 · 0 评论 -
vue-router—6命名视图
改写一下相对根路径下来再看一个例子原创 2019-06-09 21:45:25 · 113 阅读 · 0 评论 -
vue-router—5嵌套路由的使用
about<template> <div> 关于我 <hr> <ul class="nav"> <router-link to="/about" exact tag="li"> <a>study</a> </router-link&...原创 2019-06-09 21:27:44 · 419 阅读 · 0 评论 -
vue-router—4重定向和别名
import Vue from 'vue'import VueRouter from "vue-router";// 作为vue的插件Vue.use(VueRouter)import home from "@/components/home";import about from "@/components/about";import document from "@/compon...原创 2019-06-09 21:08:06 · 835 阅读 · 1 评论 -
vue-router—14案例:模拟登录跳转
login.vue<template> <div class="login"> <div class="login-box"> <h2>登录</h2> <form @submit.prevent='sendLogin' autocomplete="off"> <d...原创 2019-06-14 17:33:58 · 882 阅读 · 0 评论 -
vue-router—3router-link各种配置项
这一节主要观察不同的写法原创 2019-06-09 16:58:23 · 3150 阅读 · 0 评论 -
vue-router—13案例:功能分析&&编写插件
为什么要写插件呢,因为有一些公用的方法每次都要引入到组件里面比较麻烦,所以可以编写一个插件,看下面的例子如何写插件打印出来再举一个例子...原创 2019-06-14 16:41:46 · 138 阅读 · 0 评论 -
vue-router—2hash和history模式
开始一个应用router/index.js此项目使用的是history模式import Vue from 'vue'import VueRouter from "vue-router";// 作为vue的插件Vue.use(VueRouter)import home from "@/components/home";import about from "@/comp...原创 2019-06-09 15:48:38 · 187 阅读 · 0 评论 -
vue-router—1什么是路由以及使用步骤
现在开始实操main.jsimport Vue from 'vue'import VueRouter from "vue-router";// 作为vue的插件Vue.use(VueRouter)import App from "./App";import home from "@/components/home";var router = new ...原创 2019-06-09 13:04:22 · 184 阅读 · 0 评论 -
vue-router—12全局钩子函数
全局钩子函数用法单个路由中组件级别的原创 2019-06-13 19:29:41 · 1757 阅读 · 0 评论 -
vue-router—11编程式导航
原创 2019-06-13 15:47:34 · 146 阅读 · 0 评论 -
vue-router—10动态设置name属性左右切换
router里面设置meta routes: [ { path: '/', component: home, meta: { index: 0, title: 'home' } }, { path: '/user/:tip?/:userId?', na...原创 2019-06-13 10:27:31 · 6704 阅读 · 0 评论 -
vue-router—9导航切换过渡动画transition使用
原创 2019-06-13 09:52:49 · 833 阅读 · 0 评论 -
vue-router—7滚动行为
通过上面的配置,在点击前进后退或切换导航的时候可以记住导航条的位置还有一种方法可以通过hash的方式进行配置测试原创 2019-06-11 19:15:36 · 266 阅读 · 0 评论