总结vue中的Router基本配置命令

Vue的Router是一个用于实现页面跳转和路由管理的插件。它可以帮助我们根据不同的URL请求加载不同的组件,以及实现前端路由功能。在使用Vue的Router时,需要对它进行基本配置。以下是Vue的Router基本配置命令。

1,安装Vue Router

使用npm安装Vue Router,打开终端并在项目目录下执行以下命令:

npm install vue-router

2,导入Vue Router

在main.js文件中导入Vue Router,并使用Vue.use方法将其注册为Vue的插件:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3,创建路由实例

在main.js文件中创建一个路由实例,并配置路由规则:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history', // 使用HTML5的history模式,去除URL中的"#"
  routes
})

4,挂载路由实例

在main.js文件中将路由实例挂载到Vue实例上:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5,配置路由出口

在Vue的根组件中,通过标签来显示路由对应的组件:

<template>
  <div>
 <router-view></router-view>
  </div>
</template>

通过上述配置,我们就完成了Vue的Router的基本配置。下面是一个完整的示例:

首先,在src/components目录下创建两个组件,Home.vue和About.vue。

Home.vue内容如下:

<template>
  <div>
    <h2>Welcome to Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue内容如下:

<template>
  <div>
    <h2>Welcome to About Page</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

然后,在src/router目录下创建index.js文件,内容如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

最后,在src/main.js文件中进行如下配置:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

以上就是Vue Router的基本配置命令以及代码示例。通过这些配置,我们可以实现页面之间的跳转和前端路由功能。

相关推荐
EricWang13585 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning5 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人15 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00116 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92134 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂37 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf