vue工程内下载路由 -凯发真人娱乐

一、router

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

1 嵌套的路由/视图表

2 模块化的、基于组件的路由配置

3 路由参数、查询、通配符

4 基于vue.js过度系统的视图过度效果

5 细粒度的导航控制

6 带有自动激活的css class 的链接

7 html5 历史模式或hash模式，在ie6中自动降级

8 自定义的滚动条行为

　　安装：

首先打开项目终端内

输入：

npm install vue-router --save-dev

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

步骤如下：

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

　　      

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

         

附上router默认模板

 1 import vue from 'vue'

 2 import vuerouter from 'vue-router'

 3

 4 vue.use(vuerouter);

 5

 6 const routes = [

 7     {

 8         path: '/', //此处单引号内存放的是跳转路径

 9         component:  //此处是组件名称

10     },

11 ]

12 const router = new vuerouter({

13     routes

14 })

15

16 export default router

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

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

如下图：

附上源码：

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文件内引用。

附上源码：

headerlogo

  

headernav

  

footer

要引用到的视图组件必须用到这两个 重要标签：    ，前者用来链接路由，后者用来显示路由视图。

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

vue内下载路由的相关教程结束。