当前位置:首页 > 技术文章 > 正文内容

41、Vue-router 怎么配置路由(必会)

zonemu8小时前技术文章1

在 vue 中配置路由分为 5 个步骤,分别是:

1、安装

npm install --save vue-router

2、引用

import VueRouter from 'vue-router'

3、配置路由文件

var router = new VueRouter({

routes:[

{

path:"/hello",

component:HelloWorld

},

{

path:"/wen",

component:HelloWen

new Vue({

el: '#app',

components: { App },

router,

template: '<App/>'

})

4、视图加载的位置

默认 App.vue 文件中加<router-view></router-view>

5、跳转导航

<router-link to="/hello">helloword</router-link>(渲染出来的是 a 标签)

相关文章

智能停车场管理系统五种收费类型设置

智能停车场管理系统五种收费类型设置  点击智能停车场管理系统收费标准设置图标,出现下图所示对话框,在这个界面里面可以对停车场系统需要使用的收费标准进行个性化设置:共有五种收费类型(标准收费类、通用标准...

八款值得尝试的精美的Linux发行版,你用过哪几款?

Linux发行版各式各样,每个发行版都有自己的特点,在这篇文章中,将会列出让一些另 Linux 用户印象最深刻且精美的 Linux 发行版,包括对初学者友好和流行的发行版。elementary OSe...

Linux之父:Linux内核5.8是“我们有史以来最大的发行版之一”

Linux内核负责人Linus Torvalds对Linux内核版本5.8的第一个候选发布版本(rc1)看得出来还是挺满意的,该版本包含80万行新代码行和超过14,000个更改的文件,占内核文件检修的...

Win+Ubuntu缝合怪:第三方开发者推出“Wubuntu”Linux发行版

IT之家 2 月 26 日消息,一位第三方开发者推出了一款名为“Wubuntu”的缝合怪 Linux 发行版,系统本身基于 Ubuntu,但界面为微软 Windows 11 风格,甚至存在微软 Win...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

2024前端面试真题之—VUE篇(前端面试题vuex)

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、com...