首页 > 其他分享> 文章详细

Vue-路由插件集成和配置

2022-09-12 23:01:56 阅读：208 来源： 互联网

标签：插件 Vue vue VueRouter import router 路由

1.相关认识

　　后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务

　　前端路由:不同的网址对应各自的页面

　　 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和dom操作一样

2.路由引入

　　1. 自己npm下载引入使用

 //安装到项目中:
 npm i vue-router --save-dev//注意:这种下载不好,因为打包之后容易出问题
 npm i vue-router --save或者 npm i vue-router --S
 
 
 
 在main.js入口文件中引入
 import Vue from "vue"
 import VueRouter from "vue-router"//引入路由工具
 import App from "./App.vue"
 Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
 
 //创建路由工具
 const router=new VueRouter({
     //routes路由器 生成很多网址对应的切换组件
     routes:[{path:"/home",component:()=>import("./home.vue")},
             {path:"/about",component:()=>import("./about.vue")}]
 })
 new Vue({
     router,//把路由挂载到页面
     render(h){return h(App)}
 }).$mount("#app")
 
//在App.vue中写 <router-view></router-view>

　　2.cli安装 vue create xxapp 空格键选择router然后回车自动就会把路由安装好

3.index页面的解析

//引入Vue webpack打包时如果已经打包过了 就不会打包了 
//所以这行代码时为了当前文件中不报错  但是实质打包时并不会打包,因为main.js中已经打包了
import Vue from 'vue'
//引入路由插件
import VueRouter from 'vue-router'

//引入首页组件:一开始就会打包,因为首页一般是用户直接访问的页面 
import Home from '../views/home/index.vue'

//给组件的原型链绑定功能: this.$router  this.$routes
Vue.use(VueRouter)


//注册路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  }
]

//配置路由规则
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

标签：插件,Vue,vue,VueRouter,import,router,路由
来源： https://www.cnblogs.com/forever-ljf/p/16687616.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue-路由插件集成和配置