Vue.js 生态之vue-router
vue-router是什么~~
vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容。
vue-router的安装和基本配置
vue-router.js 可以下载 也可以用cdn,基本配置信息看如下代码~~~
vue-router demo
// html 代码
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
</div>
<div>
<router-view></router-view>
</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="../js/router_demo.js"></script>
// js 代码
var routes = [
{
path: "/",
component: {
template: `<div><h1>首页</h1></div>`
}
},
{
path: "/about",
component: {
template: `<div><h1>关于我们</h1></div>`
}
}
] var router = new VueRouter({
routes: routes,
// 路由去掉#
// mode: 'history',
}); var app = new Vue({
el: '#app',
router: router,
}); vue-router demo
路由的一些方法
路由传参以及获取参数~~
传参以及获取参数
// html 代码
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/琴女?age=20">琴女</router-link>
<router-link to="/user/提莫">提莫</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
// js 代码
var routes = [
{
path: "/",
component: {
template: `<div><h1>首页</h1></div>`
}
},
{
path: "/about",
component: {
template: `<div><h1>关于我们</h1></div>`
}
},
{
path: "/user/:name",
component: {
template: `<div>
<h1>我是:{{$route.params.name}}</h1>
<h1>我年龄是:{{$route.query.age}}</h1>
</div>`,
}
}
] var router = new VueRouter({
routes: routes,
}); var app = new Vue({
el: '#app',
router: router,
}); 传参以及获取参数
命名路由~ 注意router-link里to一定要v-bind~~
命名路由
// html代码
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link :to="{name: 'about'}">关于我们</router-link>
<router-link to="/user/gaoxin?age=19">gaoxin</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
// js代码
let routes = [
{
path: '/',
component: {
template: `<h1>这是主页</h1>`
}
},
{
path: "/about",
name: "about",
component: {
template: `<h1>关于我们</h1>`
}
},
{
path: "/user/:name",
component: {
template: `<div>
<h1>我是{{$route.params.name}}</h1>
<h2>我的年龄是{{$route.query.age}}</h2>
</div>
`
}
}
]; let router = new VueRouter({
routes: routes,
mode: "history"
}); const app = new Vue({
el: "#app",
router: router,
mounted(){
console.log(this.$route)
console.log(this.$router)
}
}) 命名路由
子路由~~ 以展示详细为例~~
子路由
// 添加子路由变化的只有父级路由
// 基于上面的例子增加
// js 代码
{
path: "/user/:name",
component: {
template: `<div>
<h1>我是:{{$route.params.name}}</h1>
<h1>我年龄是:{{$route.query.age}}</h1>
<router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>`,
},
children: [
{
path: "more",
component: {
template: `<div>
{{$route.params.name}}的详细信息
</div>`,
}
}
] }, 子路由
手动访问路由,以及传参~~
手动路由~以及传参
// 基于上面例子追加
// html 代码
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/琴女?age=20">琴女</router-link>
<router-link to="/user/提莫">提莫</router-link>
// 添加一个button按钮
<button @click="on_click">旅游</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
// js 代码
// 注意路由name的使用 这是在原例子追加
var app = new Vue({
el: '#app',
router: router,
methods: {
on_click: function () {
setTimeout(function () {
this.$router.push('/about')
setTimeout(function () {
this.$router.push({name: "user", params:{name: "琴女"},query:{age: }})
}, )
}, )
}
}
});
命名路由视图 router-view
当我们只有一个<router-view></router-view>的时候~所有内容都展示在这一个面板里面~
如果是content 和 footer 就需要同时显示并且不同区域~这就需要对视图进行命名~
命名路由视图
// html 代码
<div id="app">
<div>
<router-link to="/">首页</router-link> </div>
<div>
<router-view name="content" class="content-view"></router-view>
<router-view name="footer" class="footer-view"></router-view>
</div> </div>
// js 中的主要代码
var routes = [
{
path: "/",
components: {
content: {
template: `<div><h1>首页</h1></div>`,
},
footer: {
template: `<div><h1>关于我们</h1></div>`,
}
}
},
] 命名路由视图
错误路由的重定向~~
redirect
let routes = [
{
path: "**",
redirect: "/"
}
]
$route以及$router的区别~~
-- $route为当前router调转对象,里面可以获取name, path, query, params等~
-- $router为VueRouter实例,有$router.push方法等~~
路由的钩子
路由的生命周期就是从一个路由跳转到另一路由整个过程,下面介绍两个钩子~
router.beforeEach() router.afterEach() 详情请看代码~~
路由钩子
// html 代码
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/user">用户管理</router-link>
<div>
<router-view></router-view>
</div>
</div>
// js 代码
var routes = [
{
path: "/",
component: {
template: "<h1>首页</h1>"
}
},
{
path: "/login",
component: {
template: "<h1>登录</h1>"
}
},
{
path: "/user",
component: {
template: "<h1>用户管理</h1>"
}
}
];
var router = new VueRouter({
routes: routes
}); router.beforeEach(function (to,from,next) {
// console.log(to)
// console.log(from)
// console.log(next)
// next(false)
if(to.path=="/user"){
next("/login")
}
else {
next();
}
});
router.afterEach(function (to, from) {
console.log(to)
console.log(from)
}); var app = new Vue({
el: '#app',
router: router
}); 路由钩子
next 参数详解
next:function 一定要调用这个方法来resolve这个钩子函数。
执行效果依赖next方法的调用参数
next() 什么都不做继续执行到调转的路由
next(false) 中断当前导航 没有跳转 也没有反应
next("/") 参数是路径 调转到该路径
next(error) 如果next参数是一个Error实例 导航终止该错误
会传递给router.onError()注册过的回调中
上面的例子~~如果/user下面还有子路由的情况下会怎么样呢~????
// 匹配子路由 改一下匹配方法就可以~
// js 改动代码
router.beforeEach(function (to,from,next) {
// console.log(to)
// console.log(from)
// console.log(next)
// next(false)
if(to.matched.some(function (item) {
return item.path == "/post"
})){
next("/login")
}
else {
next();
}
});
// 元数据配置 改动代码
// html 部分
{
path: "/user",
meta: {
required_login: true,
},
component: {
template: `
<div>
<h1>用户管理</h1>
<router-link to="vip" append>vip</router-link>
<router-view></router-view>
</div>
`
},
children: [{
path: "vip",
meta: {
required_login: true,
},
component: {
template: '<h1>VIP</h1>'
}
}]
}
// js 部分
router.beforeEach(function (to,from,next) {
// console.log(to)
// console.log(from)
// console.log(next)
// next(false)
if(to.meta.required_login){
next("/login")
}
else {
next();
}
}); 匹配子路由以及元数据配置
Vue.js 生态之vue-router的更多相关文章
- Vue.js 2 vs Vue.js 3的实现 – 云栖社区
Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...
- 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
- 【vue】vue.js安装教程/vue项目搭建
前提:已安装nodejs——npm (备注教程 “物理安装” ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...
- vue.js devtools-------调试vue.js的开发者插件
vue.js devtools插件: 作用: 以往我们在进行测试代码的时候,直接在console进行查看,其实这个插件雷同于控制台,只不过在vue里面,将需要查看的数据存放在一个变量里面了~ 效果图: ...
- Vue.js——1.初识Vue
初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...
- 初学Vue.js,用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- 直接引入vue.js和使用vue脚手架的区别?
脚手架工具搭建的项目是把Vue作为一个模块(如CommonJS规范的模块)对待,在源码中引入vue模块,最终需要用构建工具(如webpack)载入模块,编写代码需要require('vue'). 而直 ...
- 【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词
一.搜素效果如下: 二.核心 1)利用oninput属性来触发搜素功能 2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class ...
随机推荐
- leetcode1005
func largestSumAfterKNegations(A []int, K int) int { sort.Ints(A) var negatives int var zeros int va ...
- php实现单点登录实例
1.准备两个虚拟域名 127.0.0.1 www.a.com127.0.0.1 www.b.com 2.在a的根目录下创建以下文件 1 //index.php 2 3 <?php 4 sessi ...
- 抓取mooc中国随笔
// $url = "http://www.baidu.com/"; $url= "https://www.icourse163.org/web/j/courseBean ...
- hive案例
数据倾斜: 操作• Join on a.id=b.id• Group by• Count Distinct count(groupby)• 原因• key分布不均导致的• 人为的建表疏忽• 业务数据特 ...
- 模板引擎Dot
Dot.js 很轻,处理速度也快,作为将json数据赋值到html页面的最好帮手. html5新引入的<template></template>就不用原先的<script ...
- 应用DBExportDoc导出mysql库为word07文档
1.相关软件下载 DBExportDoc V1.0 For MySQL 密码:znu3 MySQL Connector/ODBC 2.安装mysql-connector-odbc并配置数据源 安装略. ...
- centos7启动iptables时报Job for iptables.service failed because the control process exited with error cod
centos7启动iptables时报Job for iptables.service failed because the control process exited with error cod ...
- 3.AOP入门1.md
目录 1.定义 1.1基本概念 2. 1.定义 1.1基本概念 AOP:aspect object programing面向切面编程 aop编程的要点在于关注点和切入点 关注点:指的是代码中的重复部分 ...
- 关于三层(dao,serviece,servlet)
在登陆校验中, dao:返回的是resultset 对象,就是 ps.executeQuery(需要强化的是jdbc的具体的流程) 其中的数据库连接时可以自己写 可以通过工厂类 可以通过数据库的连接 ...
- 使用Flash Media Server(FMS)录制mp4格式的视频
最近在做一个有关视频直播和点播的项目,客户的一个需求就是可以控制对直播流的录制,直播的实现采用的是Adobe的Flash Media Server,具体方式就是:视频采集端采集视频并编码->rt ...