从Vue-cli脚手架的基本使用到vue路由的基本使用

第一部分：Vue-cli脚手架

vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入

 深，示例完整。同时官方也提供了一个开箱即用的 vue-cli 帮我们生成一个完整的项目框架

vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一个从 路由，数据流管理，http请求都有的核心项目，vue 社区的丰富资源，也是满足了我们日常开发中的需求了。

Vue-cli脚手架就是Npm的第三方包，全局安装即可

设置npm的淘宝镜像
npm config set registry  http://www.kaotop.com/file/tupian/20220516/     # vue的logo图片
        ├── components    # 组件目录
            └── HelloWorld.vue    # 欢迎页面vue代码文件 
        ├── App.vue       # 整个应用的根组件
        └── main.js        # 入口js文件
     ├── package.json     # 描述项目及项目
     ├── .gitignore      # git提交忽略配置
     ├── babel.config.js     # babel配置 
     ├── README.md       # 项目说明
        └── package-lock.json    # 项目包版本锁定和下载地址
 
 
 项目打包注意点 
项目打包：
 
npm run build 
 
在webpack打包时，会在项目目录创建dist/static，在该目录存放所有的静态资源，同时还会在
 
dist/static目录下分别创建目录 img，css，js等目录存放不同类型的静态资源。对于assets目录
 
下的文件，会分类放入不同的文件夹下。
 
devServer 
目标：使用vue.config.js覆盖webpack的配置（webpack.config.js文件）。
 
 *** 作：项目根目录下新建vue.config.js（和src同级）补充devServer
 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
  host: 'localhost',   // ip 本地
  open: true,          // 配置自动启动浏览器
  port: 3000           // 设置端口号
 },
  lintOnSave: false // 关闭eslint
})
 
第二部分：Vue-router路由基本使用 
说明：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置
 
 
 
 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统
 
 
一.安装 
npm install vue-router
 
二.创建组件
 
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，src文件目录下会
 
有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的
 
核心文件：
 
vue路由流程如下
 
 
 编写路由 
第一步：// 需求：创建路由规则文件.js
 
在此我写了一级路由和二级嵌套路由
 
src文件目录下会有一个router文件夹，此处就是可以创建编写路由规则文件的地方
 
//需求：创建路由规则文件夹
//第一步：导入vue
import Vue from "vue";
//第二步：导入路由插件
import VueRouter from "vue-router";
// 第三步：使用插件
Vue.use(VueRouter)
// 第四步：导入需要单页面切换的子组件
import MyRouterone from "../嵌套路由/stair/MyRouterone.vue";
import MyRoutertow from "../嵌套路由/stair/MyRoutertow.vue";
import MyRoutertree from "../嵌套路由/stair/MyRoutertree.vue";
// 如果有嵌套路由的情况：导入二级嵌套路由
import childrenone from "../嵌套路由/stair/children/childrenone.vue";

// 第五步：创建路由规则
const router = new VueRouter({
 routes: [
  /*
  一级路由扩展知识
  { 
   进入 /a 路径，自动跳转到 /b
   path: '/a', 
   redirect: '/b'
   },
   */
   {
    // 第一层路由请求的路径path以'/'开头，
    // component:对应装入的组件
    // 当浏览器访问 http://localhost:8080/#/MyRouterone时
    // 装入组件 MyRouterone
    path: "/MyRouterone",
    name: "MyRouterone",
    component: MyRouterone,
    // 嵌套路由的使用语法:配置二级路由
    // 语法：children:[{}]
    children: [
      {
        path: '/childrenone',
        name: 'childrenone',
        component: childrenone
      },
      /*
      二级路由扩展知识
      {
      path不以/开头，表示访问地址要加上上级路由的地址。localhost:3000/#/MyRouterone/usa
      path: 'usa', 
      component: childrenone
      },
      {
      path为空，表示 http://localhost:3000/#/sport时，默认展示父组件 + childrenone
      path:"", 
      component: childrenone
      },
      */
      ]
    },
    /*
    这里写一下params传值
    语法：
    路由中写法：path:"/MyRoutertow/:id/:name"
    组件中写法：[text]
    子组件查看参数：params:{id:abc,name:bcd}
    */
    /*
    这里写一下query传参
    组件中：[text]
    */
    {
      path: "/MyRoutertow/:id",
      name: 'MyRoutertow',
      component: MyRoutertow
    },
    {
      path: "/MyRoutertree",
      name: 'MyRoutertree',
      component: MyRoutertree
    },
    {
      // 所有路由都不匹配时，默认匹配*，显示页面404
      path: '*',
      component: Page404//写一个404页面跳转
    }
  ]
})

// 第六步：导出
export default router
// 创建路由完成
 
第二步：创建实例
 
需求：需要把写好的路由放置在main.js文件夹的出口，好让子组件被父组件调用
 
在src/main.js文件中创建一个vue的实例
 
import Vue from 'vue'
// import App from './App.vue'
// 需求：需要把写好的路由放置在main.js文件夹的出口，好让子组件被父组件调用
// 第一步：导入父组件
import App from './嵌套路由/Router-App.vue'
// 第二步：导入创建好的路由规则文件夹
// 路由规则文件夹，想叫啥叫啥，我就叫嵌套路由.js
import router from "./router/嵌套路由.js";

Vue.config.productionTip = false

new Vue({
  // 第三步：放在new Vue中
  router: router,
  render: h => h(App),
}).$mount('#app')
 
第三步：router-link制作导航
 
第一点：router-link的基本使用
 
1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
 
注意：被选中的router-link将自动添加一个class属性值.router-link-active。
 
[text]
 
to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，[text] ：就是我们要显示给用户的导航名称。
第二点：router-link传递参数
 
query参数，格式：/page1?a=1&b=2
 
[text]
 
 params参数，
 
[text]
 
 例如在路由规则文件夹的path路径中写入：/news/:id
 
可以匹配如下地址:
 
 http://localhost:8080/#/news       ==》 无法匹配
 
 http://localhost:8080/#/news/123   ==》 id就是123
 
 http://localhost:8080/#/news/3456  ==》 id就是3456
 
params传参细节
 
//根组件里的标签to="/news/123/456"
[text]
//router/index.js 这里指路由规则文件里面需要写两个参数
path: "/news/:id/:name"(id,name就是属性名)

参数值会被设置到this.$route.params 在子组件访问，
此时子组件的值为{id:123,name:456}

 
当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。
 
第四步：router-view 用于渲染匹配到的组件。
 
 
编程式导航 
API
 
// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
  path: "路由路径",
  query: {
      "参数1":值1,
      "参数2":值2
  }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
  name: "路由名称",
  params: {
      "参数1":值1,
      "参数2":值2
  }
})


// 后退
$router.back()
 
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/940216.html