2020-12-17 vue 之后端的路由

最新推荐文章于 2024-07-23 16:00:30 发布

樱花树下'

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量438

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/html_xiaojiu/article/details/111325714

版权

本文介绍了路由的基础知识，包括标准的后端路由和Vue.js中的路由实现。在Vue中，通过vue-router进行组件切换，可在main.js和App.vue中配置。此外，还讨论了使用Vue CLI创建的项目的路由设置，特别是mode: 'history'的用法，以及详情页的切换策略。

摘要由CSDN通过智能技术生成

一，路由的认识

1.标准的后端路由

前端的智能设备在发送了网络请求http：//IP：port/xxxx时候后端对xxxx进行判断，后给出响应是给前端返回一个数据还是给前端返回一个html页面

2.vue中的路由

vue是一个single page app（单页面的应用）它利用切换组件让页面重新渲染从而让用户有了页面的切换的感受那我们应该怎么去切换组件呢有两种办法一种是html5 中的history.go 或者是哈希
vue中根据这个思想就给出了方法 vue-router 这和用的时候是项目依赖（-s）需要下载的
在vue的入文件app vue.use ()注入这里是将注入的方法或者类跑了一遍当然这个也是可以分模块出来写的这个除了自己写当然也可以直接使用官方脚手架里面的给你创建好的你直接注册网址就ok了

二，vue自己动手写路由

1.main.js代码

import Vue from 'vue'
import App from './App.vue'
import ZJ1 from "@/components/ZJ1.vue"
//组件的引入
import ZJ2 from "@/components/ZJ2.vue"
import VueRouter from "vue-router"
//这是下载的路由的组件

// Vue.config.productionTip = false

Vue.use(VueRouter)
//路由注入   这个类或者方法存在于 vue这个对象里面
var router = new VueRouter({
   
//相当于注册网址
      mode:"history",//获得是文件地址
      routes: [{
   
        path:"/ZJ1",
        component:ZJ1 //地址切换 组件切换  view-router 配合得
        

      },{
   
        path:"/ZJ2",
        component:ZJ2
      }]
})

new Vue({
   
  router,//第三方都要挂在页面上
  render: h => h(App),
}).$mount