路由

路由步骤

  <div id="app">
        <<div>
            <button @click="compName='pzj'">彭忠杰</button>
            <button @click="compName='myl'">马跃磊</button>
            <button @click="compName='msy'">马士洋</button>
       </div>

1.引入路由js

 <script src="../js/vue-router.js"></script>

2.路由的配置项

let pzj = {
        template: `<div>彭忠杰</div>`
    }
let myl = {
        template: `<div>马跃磊</div>`
    }
let msy = {
        template: `<div>马士洋</div>`

3.配置路由规则

 let router = new VueRouter({
        // routes   配置对象中的router  配置路由规则
        routes: [
            {     
                path:"/",
                redirect:"msy"
            },
            {
                path: "/pzj",
                component: pzj,
               
            },
            {
                path: "/myl",
                component:myl
            },
            {
                path: "/msy",
                component: msy
            }
        ],

routes属性：

每个路由规则 都是一个对象 这个对象必须要有两个值

1.path 表示监听路由的地址

2.component 表示路由跳转对应的组件

3.redirect 重定向 重定向路径

history和hash区别

1. history http://127.0.0.1:5500/pzj 真实路径 路径中不包含# 这样路由是地址的一部分 刷新页面 会带着路由重新请求

2.hash http://127.0.0.1:5500/vue/day6/%E8%B7%AF%E7%94%B1.html#/pzj url是上有# 不会被包含在http请求中 对后端没有影响 因此改变hash后页面不刷新

mode:"hash"

默认为hash app/hash 后台管理系统/history

4.将路由规则挂载在实例上

   
   new Vue({
        el: '#app',
       router:router,
        router,
        data() {
            return {
                compName: "pzj"
            }
        }
    });