Vue路由的跳转方式
Vue中路由的跳转方式
一、<router-link to=''></router-link>
Header.vue
<template>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="" class="navbar-brand">Pizz点餐系统</a>
<ul class="navbar-nav">
<li><router-link to="/admin" class="nav-link">管理</router-link></li>
<li><router-link to="/about" class="nav-link">关于我们</router-link></li>
</ul>
</nav>
</header>
</template>
router.js
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/admin',
12 component: () => import('./components/Admin.vue')
},
{
path: '/about',
16 component: () => import('./components/about/About.vue'),
},
{
path:'*',
redirect:'/'
}
]
})
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在下面的方法中main.js就不重复写了
二、<router-link :to=''></router-link>,绑定数据的方式
Header.vue
<template>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="" class="navbar-brand">Pizz点餐系统</a>
<ul class="navbar-nav">
<li><router-link :to="homeLink" class="nav-link">主页</router-link></li>
</ul>
</nav>
</header>
</template>
<script>
export default{
data(){
return {
homeLink:'/'
}
}
}
</script>
router.js
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: () => import('./components/Home.vue')
},
{
path:'*',
redirect:'/'
}
]
})
三、路由中定义name的方法
Header.vue
<template>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="" class="navbar-brand">Pizz点餐系统</a>
<ul class="navbar-nav">
<li><router-link :to="{name:'menu'}" class="nav-link">菜单</router-link></li>
</ul>
</nav>
</header>
</template>
router.js
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/menu',
name: 'menu',
component: () => import('./components/Menu.vue')
},
{
path:'*',
redirect:'/'
}
]
})
Vue路由的跳转方式的更多相关文章
- vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件
---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...
- vue 路由 及 跳转传递参数的总结
博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...
- vue路由懒加载方式
方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...
- vue路由跳转的方式
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
- vue路由跳转的多种方式
1.router-link to 跳转 <router-link to="/child"><button>跳转</button></rou ...
- Vue路由守卫(跳转页面置顶的处理方)
在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
随机推荐
- 全国主要城市(电信)ip地址
全国主要城市(电信)ip地址 2011-09-08 16:17:18 标签:ip地址 全国主要城市(电信) 职场 休闲 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声 ...
- puppet 3+Unicorn+Nginx安装配置
puppet 3+Unicorn+Nginx安装配置 2014-08-15 10:58 酒瓶不倒 酒瓶不倒的博客 字号:T | T 一键收藏,随时查看,分享好友! Unicorn 效率要比 Webri ...
- Windows系统下载地址
地址: https://msdn.itellyou.cn/ 里面给出的是迅雷下载链接,请提前安装好迅雷
- Codeforces Round #446 Div1 E
题目大意 有n个数,进行k轮操作:随机一个i,让\(a_i\)减1,然后ans加上\(\Pi_{j\neq i}a_i\). 求ans的期望. 分析 发现,造成的伤害就是原来的ai的积减去k轮操作后的 ...
- luogu 1876 开灯 约数+打表
打表后发现答案都是完全平方数,直接输出即可. #include <cstdio> #include <algorithm> using namespace std; int m ...
- python播放音乐
最近一直想实现使用Python播放音乐的功能,找了百度上的好多博客,要不就只能播放wav格式的,要不播放mp3格式的但无法在Linux系统下使用的,或者只能在Python2的情况下播放的,写的都不符合 ...
- SpringMVC——入门
一.SpringMVC介绍: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请 ...
- 推荐系统系列(二):FFM理论与实践
背景 在CTR/CVR预估任务中,除了FM模型[2] 之外,后起之秀FFM(Field-aware Factorization Machine)模型同样表现亮眼.FFM可以看作是FM的升级版,Yuch ...
- AcWing:164. 可达性统计(拓扑排序 + 状态压缩算法)
给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量. 输入格式 第一行两个整数N,M,接下来M行每行两个整数x,y,表示从x到y的一条有向边. 输出格式 输出共N行,表示每个点能 ...
- Codeforces 731 F. Video Cards(前缀和)
Codeforces 731 F. Video Cards 题目大意:给一组数,从中选一个数作lead,要求其他所有数减少为其倍数,再求和.问所求和的最大值. 思路:统计每个数字出现的个数,再做前缀和 ...