vue-router 路由

官方网址
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