首页 > 其他分享 >vue引入vue-router

vue引入vue-router

时间:2024-04-02 18:22:38浏览次数:19  
标签:index vue js import 引入 router 路由

Vue路由(router)的安装和使用

安装vue-router插件

第一步:在CMD窗口中,使用命令跳转到vue的安装路径下
第二步:输入命令:npm i vue-router@3
vue2 要安装 vue-router3

npm i vue-router@3

vu3 要安装 vue-router4

npm i vue-router@4

第三步:出现added 1 package in 2m表示安装成功

vue-router配置环境

第一步:在main.js文件中导入vue-router命令:import VueRouter from 'vue-router'
第二步:使用命令Vue.use(VueRouter)
第三步:添加配置项,添加新的文件夹router,在router文件夹中添加index.js文件,并导入在main.js文件中:import router from './router/index'
注意:router文件夹中的index.js文件在导入时,可以省略不写index:import router from './router'

   

如何使用路由

单级路由

在router文件夹中添加index.js文件,输入命令(使用路由需要先导入组件)

注意:导入路由的组件,最好和普通组件有所区分,建议创建一个pages文件夹用来存放路由组件

//index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [{
        path: '/Index',
        name: 'Index',
        component: () => import('../pages/home/index'),
    },
    {
        path: '/homeB',
        name: 'homeB',
        component: () => import('../pages/home/B'),
    },

];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
})

export default router;
//app.vue
<template>
    <div class="hello">
        <div class="btn">
            <router-link to="/Index">Index</router-link>
        </div>
        <div class="btn">
            <router-link to="/homeB">home B</router-link>
        </div>
        <router-view></router-view>

    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        }
    }
</script>
// index.vue,homeB.vue内容简单修改即可
<template>
    <div>
        <h2>A</h2>
        <ul>
            <li>Index</li>
            <li>home B</li>
        </ul>
    </div>
</template>

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

<router-link to=""></router-link>与<a href=""></a>
在vue文件中,router-link 标签是用来代替 a 标签的
router-link 标签最终编译之后的还是 a 标签。vue-router 库帮助我们完成的
<router-view></router-view>:路由组件显示的位置,router-view 标签只是一个占位符
注意:路由组件在进行切换的时候,被切换的组件会被销毁。

 

标签:index,vue,js,import,引入,router,路由
From: https://www.cnblogs.com/czhowe/p/18111255

相关文章

  • Vue学习笔记72--element ui
    VueUI组件库:https://element.eleme.cn移动端常用UI组件库Vant:https://youzan.github.io/vantCubeUI:https://didi.github.io/cube-uiMintUI:https://mint-ui.github.ioNUTUI。。。。。。PC端常用UI组件库ElementUI:https://element.eleme.cnIViewUI:https://www.ivi......
  • Vue3集成wangeditor5
    参考连接https://www.wangeditor.com/v5/for-frame.html#使用-1效果图相关依赖<template> <div> <divstyle="border:1pxsolid#ccc;margin-top:10px"> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig......
  • vue2 +element-ui图片上传示例
    这里使用了一个没有用的裁剪插件,需要先下载它[email protected]然后在main.js引入:importVueCropperfrom'vue-cropper'Vue.use(VueCropper)1、html部分:<template><el-formref="form":model="form"label-width="1.2rem&qu......
  • vue3+ts项目配置别名
    说明在项目开发中,需要通过配置别名来方便开发读取文件目录。配置文件vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from"path";constpathSrc=resolve(__dirname,"src");exportdefault......
  • 19-Vue打包部署
    打包命令:npmrunbuild     ......
  • Vue3连接mqtt订阅消息
    Vue3中使用以及订阅没有安装可使用npminstallmqtt--save(暂时使用了[email protected])页面引入引用mqtt库不要直接引用mqtt会报错importmqttfrom'mqtt/dist/mqtt'代码:1.获取动态配置(关于mqtt的动态配置)<script>////引入mqttimportmqttfrom"mqt......
  • vue xxx.find is not a function;
    错误:1.后端获取数据集合,存到 vuex store 中和本地 window.localStorage;2.因为要解决刷新丢失问题在routeconfig中路由拦截重新 拿到本地数据window.localStorage 保存到store中;3.界面刷新报错:vuexxx.findisnotafunction分析:1.xxx类型确实不是数组;......
  • Vue2 和 Vue3 中的 v-model 的区别#记录
    vue3对v-model的语法进行了改动。vue2中有两种方式实现数据的双向绑定(组件与外部数据的双向绑定),一种是使用v-model,另一种是使用v-bind.sync修饰符。vue2中的v-model,主要是进行value属性的绑定和input事件的派发。<ChildComponentv-model="pageTitle"/>//等价于<Child......
  • 基于springboot+vue+Mysql的企业客户信息反馈平台
    开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示系统首页技术文档界面问题信息界面个人中心后台登录界面管理员功能界面客户管理界面问题信息......
  • React - React Router
    安装pnpmireact-router-dom布局布局组件用于定义应用程序的整体布局结构,决定如何将匹配的子路由渲染到指定的位置(通过<Outlet/>)。file:[src/layouts/index.js]import{Outlet,Link}from"react-router-dom";exportdefaultfunctionLayout(){return(<d......