结合个人视频学习、友人指导意见与实际情况,做下总结~
1、安装vue-router(在终端内项目文件夹下执行)

npm install vue-router --save-dev

安装成功后在终端重启下项目:npm run dev

2、在main.js下进行相关配置
(1)将vueRouter和所需要的组件(Home.vue,HelloWorld.vue)导入一下;

import Vue from 'vue'
import VueRouter from 'vue-router'	//导入路由
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

(2)声明要使用路由

Vue.use(VueRouter)	 //声明使用路由模块

(3)配置路由

const router = new VueRouter({
 routes:[
  {path:"/",component:Home},
  {path:"/helloworld",component:HelloWorld},
 ],
 mode:"history" //去掉url中的符号“#”
})

(4)在实例化的vue对象中使用router,如:

new Vue({
 router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

(5)在主组件(App.vue)中展示路由模块

<template>
  <div id="app">
    <!--导航栏-->
    <ul>
    <!--使用路由跳转不用a标签,不会发生页面加载-->
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/helloworld">HelloWorld</router-link></li>
   </ul>
    <router-view></router-view>	//展示路由模块
  </div>
</template>

3、使用router

在地址栏(url)后输入helloworld,会跳转至HelloWorld.vue

Logo

前往低代码交流专区

更多推荐