vue脚手架搭建项目+router路由配置

文章目录

    • 一、脚手架搭建项目
      • 1、全局安装@vue/cli(仅第一次执行)
      • 2、创建项目
      • 3、进入项目
      • 4、运行项目
    • 二、vue-router 路由创建
      • 1)路由安装
      • 2)创建router配置文件
      • 4)在vue项目中使用vue-router 在App.vue文件中
      • 5)解决运行报错
    • 三、嵌套路由
      • 1)子路由配置
      • 2)创建vue路由文件
      • 3)路由跳转

一、脚手架搭建项目

1、全局安装@vue/cli(仅第一次执行)

npm install -g @vue/cli

2、创建项目

vue create +项目名称

选择版本 ( eg: Default ([Vue 2] babel, eslint))

long long times …

看到 Successfully 就成功了

3、进入项目

cd 项目名

4、运行项目

 npm run serve

二、vue-router 路由创建

1)路由安装

打开项目下 package.json文件,查看 vue 版本。
vue 版本为 2.x,建议 vue-router 安装 3.x 版本。
vue 版本为 3.x,建议 vue-router 安装 4.x 版本。

npm install [email protected]
or
npm install [email protected]

2)创建router配置文件

创建一个router文件夹 ,文件中创建一个index.js的文件 修改配置信息

import Vue from 'vue' //引入vue js是一个vue的配置文件 vue版本是2.6
import Router from 'vue-router' //vue-router 安装的对象 npm install vue-router@"3.0.1"
import VueRouter from "vue-router";
import Index from "../views/Index"  //组件 components
import User from "../views/user"
//vue中使用Router
Vue.use(Router)
const routers =[ //配置router与组件之间的对应关系
    {
        path: '/',
        component: Index,
        name: 'index',
    },
]
//创建一个vue-router实例对象
const router =new VueRouter({
    mode:"history",//history 不带#号 hash 带#号
    routes:routers //所有的路由数组
})
//导出路由对象  使用路由的地方引入即可  一般在入口main.js中使用
export default router;

###3)在入口main.js中引入vue-router

import Vue from 'vue'
import App from './App.vue'
import Router from "./router/index";// 1、引入配置好的router

/**
 * 项目的入口
 * @type {boolean}
 */
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:Router  //2、申明router
}).$mount('#app')

4)在vue项目中使用vue-router 在App.vue文件中


页面跳转

this.$router.push("url") //url:路由的地址  在中跳转
模板中跳转 
                    

你可能感兴趣的:(vue.js,javascript,前端)