vue工程内下载路由

一、路由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 导入 

如下图：

 

 

 

 附上源码：

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>，前者用来链接路由，后者用来显示路由视图。

 

 

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