每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、设置默认路由)

路由别名

别名的作用:防止文件路径泄露

使用之前显示如下:

使用别名后就只会显示到域名,后面的文件是不会显示的,这就起到保护的作用了

在main.js中的路由中添加name来创建别名

const routes = [
    {path:‘/footer‘,name:footerLink,component:Footer}
]

在组件中的路由中通过对象属性来实现路由

<router-link :to="{name:homeLink}">Mirror微申</router-link>

跳转

1.跳转到上一次浏览的页面

this.$router.go(-1)

2.跳转到指定路由

this.$router.replace(‘/footer’)
// 还可以通过别名跳转
this.$router.replace({name:’footerLink’})

也可以通过push进行

this.$router.push(‘/footer’)
this.$router.push({name:’footerLink’})

设置默认路由

const routes = [
    {path:‘/‘,redirect:‘/home‘},
    {path:‘/home‘,name:homeLink,component:Home},
]

二级路由

原文地址:https://www.cnblogs.com/cap-rq/p/10101237.html

时间: 2024-11-09 15:00:17

每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、设置默认路由)的相关文章

每天一点点之vue框架开发 - vue坑-This relative module was not found

94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * ../node_modulesivans/bootstrap/dist/js/bootstrap.min.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=

每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

每天一点点之vue框架开发 - vue坑-input 的checked渲染问题

选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',只需要判断渲染checked这个属性就好了. 不多说了,直接上代码 <div v-for="(item,index) in product_

基于Vue框架开发的仿饿了么前端小应用

主要使用vue框架进行开发.使用最新的框架版本,修正了vue1.0到vue2.0过度过程出现的几处bug. 视频教程则是黄轶老师的<vuejs高仿饿了么APP>. 源代码地址:https://github.com/waihoyu/sell 原文地址:https://www.cnblogs.com/waihoyu/p/9350175.html

vue框架开发出现白屏的解决方法汇总

利用vue框架写一个简单的新闻客户端,修改了部分配置重启项目后发现又白屏的情况.特此做个简单的汇总. 1.npm run build打包页面空白 发现页面head中引用的js和css文件是出现了路径错误,这里修改如下: 解决位置:config/index.js文件:把assetsPublicPath: '/'改为assetsPublicPath: './' 2. iOS的Safari下无法打开网页 webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开

用VUE框架开发的准备

使用VUE框架编写项目的准备工作 下载小乌龟拉取码云项目文件 小乌龟要设置你的码云账号 密码 在控制面版 中 凭证里可以修改 下载git工具 git工具里不能运行npm类的代码,要下载Node.js,安装后就可以运行npm类的代码了 第一次运行在项目文件里鼠标右击选择git bash,输入npm  install 下载依赖包 输入npm run dev 运行项目 原文地址:https://www.cnblogs.com/java--script/p/12332365.html

每天一点点之vue框架开发 - 部署到线上

1.在项目根目录下运行如下命令 npm run build 会生成一个dist目录, 2.然后将dist目录上传至服务器就可以访问页面了,不需要配置vue环境了. 原文地址:https://www.cnblogs.com/cap-rq/p/10127909.html

每天一点点之vue框架开发 - 数据渲染-for循环中动态设置页面背景色

实现方式很简单,在属性前加:,表示绑定 :style="{'background':item.bgColor} 代码样例: <li v-for="item in laber_cloud"> <router-link :style="{'background':item.bgColor}" >{{item.name}}</router-link> </li> 原文地址:https://www.cnblogs.c

在Vue框架中引入Element

文章会讲到如何在Vue框架中引入Element 那我们先来说一下Vue框架:Vue是渐进式,JavaScript框架.很多人不理解什么是渐进式,简单点讲就是易用.灵活.高效(没有太多限制) 这里介绍npm安装方式: 打开cmd,找到你Vue项目的路径 运行 npm i element-ui -S 然后在main.js里写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/