官方网址
vue-router 路由
路由是，实现在一个页面中，跳转到不同的页面，会有历史记录。
NPM安装
npm install vue-router
在模块化中使用路由，需要
//导入Vue实例
import Vue from 'vue'
//导入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)
使用路由步骤
路由需要在main.js文件中创建，我们通常会重新创建一个文件来专门写路由的实例和配置。
创建一个路由实例
我们需要把路由实例导出去，在main.js需要引入，·import router from './router/index',路由需要在main.js中的vue实例中配置一下路由器对象,保证应用的每个页面都可以使用。--详细请见官方网址
//这个是配置路由的文件
export default new VueRouter({
//定义路由器对象
routes: [
{
//每一天路由信息，就是一个对象
//*路径
path: '/home',
// 名称
name: '首页',
//* 组件
component: Home,
},
{
path: '/List',
name: '列表',
component: List
},
{
path: '/about',
name: '关于',
component: About
},
{
path: '/news',
name: '新闻',
component: News
},
]
})
在路由实例中，定义路由器对象，routes中是一个对象数组，每个对象中，都是一个路由信息，在对象中，有path name component中，分别代表的是路径、名称、组件，在这三个中，path和 component定义的， component是没有 s 的，区别是，一个是全局组件注册（s），和局部组件注册.
怎么使用路由
路由视图组件
路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，就会在 router-view中显示对应的路由组件。
<router-view></router-view>
路由链接组件
路由链接，用于跳转路由，to属性设置路由路径
<router-link to="/home">首页</router-link>
<router-link> 跳转其实就是相当于瞄链接
编程式路由跳转
this.$route
当前路由的配置信息
this.$router
当前路由器对象
我们可以影push()进行路由的跳转
this.$router.push('/order')
push方法跳转需要进行判断，如果连续跳转同一个路由，就会报错，如果跳转的路径跟当前的路径相同就不进行跳转
if (this.$route.path !== "/about") {
this.$router.push("/about");
}
replace方法的跳转，是替换当前的路由路径，缺点是没有历史记录，在刷新页面的时候，会出现页面丢失当的情况
this.$router.replace('/about')
路由传参
路由组件传参 | Vue Router (vuejs.org)
1.params 参数
路由配置
{
// 注意：这里的路由需要传一个参数，路由可以传多个参数
path:'/city/:id',
path:'/city/:id/:name', //多个参数
// 设置该选项为true，组件可以通过props选项接收路由参数
props:true,
component:City
},
// *号，表示匹配不上的所有路由
{
path:'*',
component:Error404
}
在router-link在要后面传入相应的值
<router-link to="/type/1001/nj">南京</router-link>
需要在 props: ["id",'name'],中配置相应的名称
$route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
v-html指令
2. query参数
路由地址，采用query传参方式：?参数1=XXX&参数2=XXX...
多个参数使用&符号连接
<router-link to="/news/?id=1001">弘扬真正民主精神，共创人类美好未来</router-link>
通过$route.query获取路由地址?后面的参数
this.$route.query 当前路由下的参数
4. vue.config.js
// 引入nodejs内置模块path
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
// 关闭 eslint-loader 语法检查
lintOnSave:false,
// 配置devServer开发服务器
devServer:{
// 端口号
port: 5566,
// 自动打开
open:true,
// 静态资源路径
// 注意：__dirname是nodejs的内置变量，返回的是的当前项目的绝对路径
contentBase: path.join(__dirname, "static")
},
// 用于配置原生的Webpack配置
configureWebpack:{
// 解析
resolve:{
// 定义路径别名
alias:{
"@c":path.resolve(__dirname,'src/components'),
"@p":path.resolve(__dirname,'src/pages'),
"@a":path.resolve(__dirname,'src/apis'),
"@u":path.resolve(__dirname,'src/utils'),
}
}
}
}
vue.config.js文件相当于webpack打包工具,在这里配置webpack
