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路由的跳转方式的更多相关文章

  1. vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件

    ---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...

  2. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  3. vue路由懒加载方式

    方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...

  4. vue路由跳转的方式

    vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...

  5. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  6. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

  7. vue路由跳转的多种方式

    1.router-link to 跳转 <router-link to="/child"><button>跳转</button></rou ...

  8. Vue路由守卫(跳转页面置顶的处理方)

    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...

  9. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

随机推荐

  1. 09-sp_lock和sys.dm_tran_locks的用法

    一.总结 1.网址 https://docs.microsoft.com/zh-cn/sql/relational-databases/system-stored-procedures/sp-lock ...

  2. CodeForces 788B - Weird journey [ 分类讨论 ] [ 欧拉通路 ]

    题意: 给出无向图. good way : 仅有两条边只经过一次,余下边全经过两次的路 问你共有多少条不同的good way. 两条good way不同仅当它们所经过的边的集合中至少有一条不同 (很关 ...

  3. Visual Studio 编译Winform程序不生成.vshost.exe和.pdb文件的方法

    问题:使用Visual Studio编译工程时,默认设置下,即使选择了「Release」时也会生成扩展名为「.vshost.exe」和「.pdb」的文件. 先解释一下各个文件的作用: .pdb文件: ...

  4. PHP基础教程-APACHE

    兄弟连:如何配置APACHE.首先,安装并配置PHP3 1.解开压缩包到你喜欢的目录如:C:PHP3 2.把C:php3php3.ini-inst文件改名成PHP3.INI并拷贝到C:windows ...

  5. 如何理解JS内的Truthy值和Falsy值

    跟据MDN的术语表解释如下: 在 JavaScript 中,Truthy (真值)指的是在 布尔值 上下文中转换后的值为真的值.所有值都是真值,除非它们被定义为 falsy (即除了 false,0, ...

  6. JVM(八),垃圾回收标记算法

    八.垃圾回收标记算法 1.对象被判定成垃圾的标准 没有被其他对象引用 2.判断对象是否为垃圾的算法 (1)引用计数法 优点and缺点 (2)可达性分析算法

  7. 利用栈实现字符串中三种括号的匹配问题c++语言实现

    编写一个算法,检查一个程序中的花括号,方括号和圆括号是否配对,若能够全部配对则返回1,否则返回0. Head.h: #ifndef HEAD_H_INCLUDED #define HEAD_H_INC ...

  8. 9.一次简单的Web作业

    Web作业 <!DOCTYPE html> <!-- 作业描述:由于引用了JQuery库,所以请在联网的时候打开该页面. 本次作业是在上次作业的基础上的进一步完善,上次作业页面预留的 ...

  9. 图论小专题A

    大意失荆州.今天考试一到可以用Dijkstra水过的题目我竟然没有做出来,这说明基础还是相当重要.考虑到我连Tarjan算法都不太记得了,我决定再过一遍蓝皮书,对图论做一个小的总结.图论这个部分可能会 ...

  10. 深度学习笔记(十四)车道线检测 SCNN

    论文:Spatial As Deep: Spatial CNN for Traffic Scene Understanding 代码:https://github.com/XingangPan/SCN ...