vue路由-router
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中
简单使用
vue路由-router的更多相关文章
- 单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
- vue路由router的三种传参方式
方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- vue 路由动态传参 (多个)
动态传参 传值页面 客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面 客户详情CustomerDetails.vue 通过this.$router.para ...
- vue路由请求 router
创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
随机推荐
- 更新docker镜像
方式一:通过export和import的方式 //导出容器快照到本地文件 $ docker export 1e560fca3906 > ubuntu.tar //将快照文件导入为新的镜像 $ c ...
- Spark入门案例 - 统计单词个数 / wordcount
Scala版 import org.apache.spark.{SparkConf, SparkContext} object WordCountScala { def main(args: Arra ...
- Java判断是否是质数
public static boolean isPrime(int num) { /* * 质数定义:只有1和它本身两个因数的自然数 * * 1. 小于等于1或者是大于2的偶数,直接返回false * ...
- Solution -「洛谷 P5236」「模板」静态仙人掌
\(\mathcal{Description}\) Link. 给定一个 \(n\) 个点 \(m\) 条边的仙人掌,\(q\) 组询问两点最短路. \(n,q\le10^4\),\(m\ ...
- head 插件 Content-Type header [application/x-www-form-urlencoded] is not supported
{ "error": "Content-Type header [application/x-www-form-urlencoded] is not supported& ...
- MYSQL优化的一些性能与技巧
1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一 ...
- JS的一些对象
JS是基于对象的语言.当然此时都说是面向对象的语言. 类:模板,原型对象 对象:具体的实例 原型对象: var user = { name:"xiaoxiao", age:5 ...
- MySQL架构原理之体系架构
MySQL是最流行的关系型数据库软件之一,由于其体量小.速度快.开源免费.简单易用.维护成本低等,在季军架构中易于扩展.高可用等优势,深受开发者和企业的欢迎,在互联网行业广泛使用. 其系统架构如下: ...
- [LeetCode]1480. 一维数组的动态和
给你一个数组 nums .数组「动态和」的计算公式为:runningSum[i] = sum(nums[0]-nums[i]) . 请返回 nums 的动态和. 示例 1: 输入:nums = [1, ...
- hbuilderx快捷键、回到上一步、回到上次编辑处
快捷键:Alt + 左/右箭头 其他快捷键: