学习的时候,尽量打开官方文档。
Vue Router 是 Vue.js 官方的路由管理器,他和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过度效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
vue-router 是一个插件包,所以我们还是需要 npm/cnpm 来进行安装的。打开命令行工具,进入你的项目目录,输入下面的命令:
npm install vue-router --save-dev
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确的安装路由功能
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter);
测试基于:https://www.cnblogs.com/kaisheng-reflect/p/14994142.html 中的 my-vue 项目
先删除没有用的东西,如 assets 下的 logo 、hello.vue、hello.js
components
目录下存放我们自己编写的组件
定义一个 Content.vue
组件
<template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style>
安装路由,在 src 目录下新建一个文件夹 router
,专门存放路由。在 router 文件夹下新建index.js
作为路由入口。
import Vue from 'vue' //导入路由插件 import VueRouter from "vue-router"; //导入自定义组件 import Content from "../components/Content"; import Main from "../components/Main"; //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes: [ { name: 'content', path: '/content', component: Content }, { name: 'main', path: '/main', component: Main } ] });
在 main.js
中配置路由
import Vue from 'vue' import App from './App' //导入路由配置目录 import router from './router' //自动扫描里面的路由配置 //用来关闭生产模式下给出的提示 Vue.config.productionTip = false //显式声明使用 VueRouter new Vue({ el: '#app', router, //配置路由 components: {App}, template: '<App/>' })
在 App.vue
中使用路由。
<template> <div id="app"> <H1>Vue-router</H1> <router-link to="/main">首页</router-link> <router-link to="/content">内容页</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>