VueRouter基础

vue路由的注册

  1. 导入

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    # 可以是下载之后的
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
  2. 定义一个匹配规则对象

    let url=[
    {
    path: "/",
    component: {
    template:`<div><h1>组件</h1></div>`
    }
    }
    ]
  3. 实例化VueRouter对象,并把匹配规则注册进去

    let router = new VueRouter({
    routes: url
    });
  4. 把VueRouter实例化对象注册Vue的根实例中

    const app = new Vue({
    el: "#app",
    router : router
    })
  5. 在div标签中直接调用就可以了

    <!--4 直接写router-link标签就-->
    <router-link to="/">首页</router-link>
    <router-link to="course">课程</router-link>
    <router-view></router-view>

路由的命名

  • 路由的参数name和调用this.$route.params.name

  • let url = [{
    path: "/user/:name",
    name : 'user',
    component: {
    template: `<div><h1>这是{{this.$route.params.name}}页面</h1></div>`,
    mounted(){
    console.log(this.$route)
    }
    }
    }]
  • 调用

    <div id="app">
    <router-link :to="/">主页</router-link>
    <router-link :to="{name: 'login'}">登陆</router-link>
    <router-link :to="{name: 'user', params: {name: 'ruizhiling'}}">角色</router-link>
    <router-view></router-view>
    </div>
  • 注意to一定动态绑定

手动路由

  • 在url中通过写按钮的方式对其进行跳转

路由的参数

  • url
  • 显示

路由的钩子函数

  • -- beforeEach(function(to, from, next){
    to 你要去哪里
    from 你从哪里来
    next 你接下来要做什么
    })
    -- afterEach(function(to, from){
    to 你要去哪里
    from 你从哪里来
    })

命名的路由视图

  • 一个路由对应多个组件
  • div中写法

Vue的生命周期

  • 图示

    流程图

    new Vue --> 监听数据 --> 初始化事件 --> 找el --> template --> 编译形成虚拟DOM
    --> 渲染页面 -- 数据改变重新渲染页面 -- app.$destroy()

使用router组件流程

  1. 下载

    npm install vue-router
  2. 配置

  3. 注册到vue中

  4. 简单使用

vue路由-router的更多相关文章

  1. 单页vue路由router

    Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...

  2. vue路由router的三种传参方式

    方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

  3. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  4. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  5. vue路由请求 router

    创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...

  6. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  7. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  8. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  9. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

随机推荐

  1. Solution -「CF 802C」Heidi and Library (hard)

    \(\mathcal{Descriptoin}\)   Link.   你有一个容量为 \(k\) 的空书架,现在共有 \(n\) 个请求,每个请求给定一本书 \(a_i\).如果你的书架里没有这本书 ...

  2. ajax的发展

    ajax(Asynchronous Javascript and XML)异步javascrip和XMl. ajax只是一种web交互方法.在客户端(浏览器)和服务区段之间传输少量的信息.从而为用户提 ...

  3. python-关键字驱动接口框架中,接口关联字段进行值替换的实现方式

    前言 编写关键字驱动的接口自动化测试框架中,通过不同的取值方式,将需要关联的字段以及取出的值放到一个空字典中,需要将关联的字段进行值替换,下面是替换的实现方式 实现思路 import re temp_ ...

  4. .Net Core AOP之AuthorizeAttribute

    一.简介 在.net core 中Filter分为以下六大类: 1.AuthorizeAttribute(权限验证) 2.IResourceFilter(资源缓存) 3.IActionFilter(执 ...

  5. [Matlab]二维统计分析图实例

    常见的二维统计分析图形: bar(x,y,选项) 条形图 stairs(x,y,选项) 阶梯图 stem(x,y,选项) 杆图 fill(x1,y1,选项1,x2,y2,选项2,--) 填充图 实例: ...

  6. Qt:QCustomPlot使用教程(二)——基本绘图

    0.说明 本节翻译总结自:Qt Plotting Widget QCustomPlot - Basic Plotting 本节内容是使用QCustomPlot进行基本绘图. 本节教程都使用custom ...

  7. Python:lxml

    学习自: python3解析库lxml - Py.qi - 博客园 lxml官方文档 lxml官方文档--lxml中的类.方法使用,如果需要查看某些方法的具体用法,就到这个网页下 python爬虫系列 ...

  8. 01_c语言再学习_基础部分(1)

    目录: 1.编译基础 2.c语言关键字 3.c语言数据类型 4.二进制/8进制/16进制 5.计算机内存数值存储方式:sizeof/原码/反码/补码 6.c语言中的字符和字符串 7.c语言中的数组和字 ...

  9. c++刷leetcode记录

    #include<iostream> #include<sstream> #include<vector> std::vector<int> split ...

  10. 五、Java控制流程

    Java流程控制* 用户交互Scanner.Scanner进阶使用 用户交互Scanner ​ 之前我们学习的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获 ...