vue工程内下载路由

合集 - Vue(17)

1.Vue跨域详解2023-05-162.Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘2023-05-163.TypeError: Cannot read property 'upgrade' of undefined2023-04-234.Vue选日期滚动条自动定位到选定的日期位置2023-03-285.Vue根据时间戳制作倒计时15分钟2023-03-276.防抖节流utils2023-03-137.一些JS过滤方法2022-10-088.Vue全局公共服务类mixin2022-10-089.npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`2022-06-1610.vue一直处在2.9.6版本卸载不了升级不了解决方案2022-06-0811.Vue 全局避免按钮重复点击2022-05-2712.Vue2 去除定时器之常用三种方式及特殊方式2022-05-1613.Vue Element-ui 之 el-table自动滚动2022-05-1114.el-table自适应列宽2022-05-13

15.vue工程内下载路由2021-08-06

16.40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.2021-08-1117.Vue监听系统是否为暗黑模式2023-12-14

收起

一、路由Router

　　Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，加速构建单页面应用。包含功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过度系统的视图过度效果
细粒度的导航控制
带有自动激活的CSS class 的链接
HTML5 历史模式或hash模式，在IE6中自动降级
自定义的滚动条行为

　　安装：

首先打开项目终端内

输入：

npm install vue-router --save-dev

 

 

 因为路由是外部插件，因此我们还需要在项目中导入，在这之前我们要先确认成功下载router路由

步骤如下：

　　打开项目内node_modules文件夹，在内部找到 vue-router 即安装成功

 

　　      

 

 

确认成功安装后，在项目列表目录 src 下 创建  router  文件夹、在router文件夹下创建  index.js文件，用于配置路由的页面跳转。

         

附上router默认模板

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const routes = [
    {
        path: '/', //此处单引号内存放的是跳转路径
        component:  //此处是组件名称
    },
]
const router = new VueRouter({
    routes
})

export default router

 

 配置完路由后，一定要加上最末尾那句: export default router;   只有导出后才能在 main.js 内导入。

现在我们就来配置  main.js     main.js中只需要将router导入即可。 main.js文件是vue项目的主配置文件，项目中需要的插件等都在这里 import 导入 

如下图：

 

 

 

 附上源码：

?

1 2 3 4 5 6 7 8 9 10

import Vue from 'vue' import App from './App.vue' import router from './router/index.js'   Vue.config.productionTip = false   new Vue({     router,   render: h => h(App), }).$mount('#app')

 

配置完 main.js 后，我们要用路由，那么就需要在 App.vue 中配置一下

App.vue文件是整个vue项目的主入口，而views视图层内的视图文件及components内的组件文件要想在界面上显示，必须得在App.vue文件内引用。

 

 

 附上源码：

<router-link to="headerlogo">headerlogo</router-link>
  <br />
    
<router-link to="headerNav">headernav</router-link>
  <br />
    
<router-link to="footer">footer</router-link>
<router-view></router-view>

要引用到的视图组件必须用到这两个 重要标签： <router-link to="视图名">   <router-view>，前者用来链接路由，后者用来显示路由视图。

 

 

以上就是路由的下载与配置以及简单应用。