VueRouter基础

vue路由的注册

导入

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
# 可以是下载之后的<script src="vue.min.js"></script><script src="vue-router.js"></script>

定义一个匹配规则对象

let url=[{path: "/",component: {template:`<div><h1>组件</h1></div>`}}
]

实例化VueRouter对象，并把匹配规则注册进去
```
let router = new VueRouter({routes: url
});
```
把VueRouter实例化对象注册Vue的根实例中
```
const app = new Vue({el: "#app",router : router
})
```

在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组件流程

下载
```
npm install vue-router
```
配置
注册到vue中
简单使用

转载于:https://www.cnblogs.com/yuncong/p/10205726.html

vue路由-router相关推荐

vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...
Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
Vue路由-Router搭建以及简单使用
一.VueRouter介绍 1.所谓的路由就是根据用户不同的访问地址,应用程序给与不同的响应,VueRouter就是官方的路由管理器. 二.配置路由(如果在创建项目的时候没有选择vue-router ...
单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
vue——路由router
点击页面中的导航链接不会刷新页面,只会做页面的局部更新 1.安装vue-router 执行 npm i vue-router@3命令注意版本 vue2--vue-router3:vue3--vue- ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候嵌套使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套先来准备一个普通的路由案例: <!DOCTYPE html> < ...

vue路由-router

VueRouter基础

vue路由的注册

路由的命名

手动路由

路由的参数

路由的钩子函数

命名的路由视图

Vue的生命周期

使用router组件流程

vue路由-router相关推荐

最新文章

热门文章