Vue结合webpack使用vue-router

作者:神秘网友 发布时间:2020-10-29 03:03:44

Vue结合webpack使用vue-router

Vue结合webpack使用vue-router

一、先安装vue-router模块

npm i vue-router -S

二、导入vue-router包

import VueRouter from 'vue-router'

三、手动安装VueRouter

Vue.use(VueRouter)

四、创建路由对象

var router = new VueRouter({

    routes: [

        {path:'/account',component:accout},

        {path:'/goodsList',component:goodsList},

    ]

})

五、将路由对象挂载到vm上

var vm = new Vue({

    el: "#app",

    data: {

        msg: '123'

    },

    render: c => c(login),

    //将路由对象挂载到vm上

    router

})

代码如下:

import Vue from 'vue'

//webpack无法打包 .vue的文件,需要安装相关的loader
// npm i vue-loader vue-template-compiler -D
import login  from './js/login.vue'

// 1、导入vue-router包
import VueRouter from 'vue-router'
//2、手动安装VueRouter
Vue.use(VueRouter)

import Name,{aa,bb}  from './test.js'

import accout from './main/Account.vue'
import goodsList from './main/GoodsList.vue'

//3、创建路由对象
var router = new VueRouter({
    routes: [
        {path:'/account',component:accout},
        {path:'/goodsList',component:goodsList},
    ]
})

var vm = new Vue({
    el: "#app",
    data: {
        msg: '123'
    },
    render: c => c(login),
    // 4、将路由对象挂载到vm上
    router
})

Vue结合webpack使用vue-router

Vue结合webpack使用vue-router相关教程

  1. 在vscode中执行vue add typescript时出现vue : 无法加载文件

    在vscode中执行vue add typescript时出现vue : 无法加载文件 错误如下: PS D:\work\vue\workbench vue add typescriptvue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\InstallFile\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。有

  2. 新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流

    新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流程 1、下载vue-cli ( npm install -g vue-cli) 2、构建项目( vue init webpack my-project)构建项目到指定文件夹下,参考 3、修改package.json的compression-webpack-plugin(打包),默认加

  3. vue父子组件传值:详解父组件向子组件传值(props)

    vue父子组件传值:详解父组件向子组件传值(props) vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件。 2)这个自定

  4. Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc

    Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? 首先摆上错误代码 以下是正确代码 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initi

  5. vue父子组件间的数据传递

    vue父子组件间的数据传递 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title父子组件的数据传递/title script src='./vue.js'/script/headbody div id=root counter/counter counter/counter /div script var counter = { template: 'div0/div' } var

  6. vue 实时监听数据实现报警功能

    vue 实时监听数据实现报警功能 项目需求: 项目中需要实时监听数据变化达到预定值后,会触发报警功能(报警弹窗提示) 问题描述: 1.前台在不断获取数据时候数据传输过程中,要避免数据一直积累,页面越来越卡; 2.该报警功能需要在所有页面中进行监听; 解决

  7. Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74)

    Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74) 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:( 确保已安装node.js ) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加ce

  8. vue项目配置环境变量

    vue项目配置环境变量 配置环境变量官方文档 配置环境变量的两种方式 1.在根目录创建.env文件并创建变量 环境变量的命名必须是:VUE_APP_XXX 环境变量声明方式:“键=值”对 2.配置文件作用范围 3.配置配置文件 1.html中使用环境变量 2.组件中使用环境变量 //.