文章目录

9.1、说明9.2、安装9.2.1、测试

9.1、说明

Vue Router 是 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

9.2、安装

基于第一个vue-cli进行测试学习;先查看node_ module s中是否存在vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块话工程中使用它，必须要通过 Vue.use() 明确的安装路由功能：

import Vue from `vue` import VueRouter form `vue-router` Vue.use(VueRouter);

9.2.1、测试

先删除没有用的东西components目录下存放我们自己编写的组件定义一个Content.vue和Main.vue的组件 Content.vue <template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style>

Main.vue

<template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style> 安装路由，在src目录下，新建一个文件夹：router，专门存放路由 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: [ { // 路由的路径 path: '/content', // 路由名称 name: 'content', // 跳转的组件 component: Content }, { // 路由的路径 path: '/main', // 路由名称 name: 'content', // 跳转的组件 component: Main } ] }) 在main.js中配置路由 import Vue from 'vue' import App from './App' import router from './router' // 自动扫描里里面的路由配置 // 关闭生产模式下给出的提示 Vue.config.productionTip = false // 显示声明使用router // Vue.use(router); 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> import Content from './components/Content' 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>

学习视频链接：https://www.bilibili.com/video/BV18E411a7mC?p=16