jiaojsun的博客

router App.vue user.vue <template> <div> 我是user <div class="user-list"> <router-link style="padding: 0px 20px" :to="{path: '/user/'+item.tip+'/...

1.嵌套路由怎么定义 看一下教程中的案例。 首先看一下最外面的路由 也就是说在项目一开始，可以出现下面几种路径 2.路由之间跳转 声明式（标签跳转） 编程时（js跳转） 3.说一说懒加载（按需加载路由） 4.vue-router有哪几种导航钩子 5.完整的导航解析流程 导航被触发。 在失活的组件里调用离开守卫。 调用全局的be...

首先用一下视频中的方法 也可以用这种方式 （以下是官网原文） 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 首先，可以将异步组件定义为返回一个 Pr...

需求 看下面，当我点击左侧的时候，右侧就会定位到某一块，看一下要怎么做 docl.vue 首先要对应好各自的hash值 看一下完整的代码 doc.vue <template> <div class="doc"> <div class="doc-nav"> <ul class="main-menu"&g...

需求 面包屑导航就是想实现下面一个功能，当我点击上面标题的时候，下面首页那块也跟着变化。 看一下实现的代码，其实比较简单 ui js

改写一下 相对根路径 下来再看一个例子

about <template> <div> 关于我 <hr> <ul class="nav"> <router-link to="/about" exact tag="li"> <a>study</a> </router-link&...

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...

login.vue <template> <div class="login"> <div class="login-box"> <h2>登录</h2> <form @submit.prevent='sendLogin' autocomplete="off"> <d...

这一节主要观察不同的写法

为什么要写插件呢，因为有一些公用的方法每次都要引入到组件里面比较麻烦，所以可以编写一个插件，看下面的例子 如何写插件 打印出来 再举一个例子 ...

开始一个应用 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...

现在开始实操 main.js import Vue from 'vue' import VueRouter from "vue-router"; // 作为vue的插件 Vue.use(VueRouter) import App from "./App"; import home from "@/components/home"; var router = new ...

全局钩子函数用法 单个路由中 组件级别的

router里面设置meta routes: [ { path: '/', component: home, meta: { index: 0, title: 'home' } }, { path: '/user/:tip?/:userId?', na...

通过上面的配置，在点击前进后退或切换导航的时候可以记住导航条的位置 还有一种方法可以通过hash的方式进行配置 测试