Vue — 路由

构建项目myproject

vue init webpack myproject
在安装过程中，先不要安装路由

11.png

安装完成后,进入生成的文件夹，运行

cd myproject
npm run dev

image1.png

在地址栏输入localhost：8080

image2.png

接着安装路由插件

cnpm install vue-router --save

路由设置

1.需要实例化router，将router加入到vue的实例中去

在myproject中src里面main.js添加以下代码

//首先引入
import Vrouter from 'vue-router'
Vue.use(Vrouter)
var router = new Vrouter({

})
new Vue({
  el: '#app',
// 在实例化中加入
  router,
  components: { App },
  template: '<App/>'
})

2.在实例化router中设置routers配置选项（mode:”history”:将路由设置成history模式，可以去掉地址栏的 #）

var router = new Vrouter({
  mode:'history',
})

3.创建三个组件

Cat.vue

<template>
  <div>
    <img src="./cat.jpg" class="mycat">
    <p>我是一只猫</p>
  </div>
</template>
<script>
    export default {
        name: "cat",
    }
</script>
<style scoped>
.mycat{
  width:400px;
  height:400px;
}
</style>

Dog.vue

<template>
  <div>
    <img src="./dog.jpg" class="mydog">
    <p>我是一只狗</p>
  </div>
</template>
<script>
  export default {
    name: "dog",
  }
</script>
<style scoped>
  .mydog{
    width:400px;
    height:400px;
  }
</style>

Alpaca.vue

<template>
  <div>
    <img src="./sheep.jpg" class="myApi">
    <p>我是一只羊驼</p>
  </div>
</template>
<script>
  export default {
    name: "alpaca",
    }
  }
</script>
<style scoped>
  .myApi{
    width:400px;
    height:400px;
  }
</style>

4.在routes中给每个路由配置相关组件

设置vue-router显示的位置，通过内置组件 <router-view></router-view>

// 在main.js中引入相关组件
import Dog from '@/components/Dog'
import Alpaca from '@/components/Alpaca'
import Cat from '@/components/Cat'

var router = new Vrouter({
    routes:[
    {
      path:"/cat",
      component:Cat,    },
    {
      path:"/dog",
      component:Dog,
    },
    {
      path:"/alpaca",
      component:Alpaca
    }
  ]
})

5.设置vue-router显示的位置，通过内置组件 <router-view></router-view>

在App.vue单入口中写上该标签

<template>
  <div id="app">
        <router-view></router-view>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</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>

运行结果：在地址栏输入/cat,就显示猫，/dog就显示狗，/alpaca就显示羊驼

image.png

6.不在地址栏输入，通过标签点击切换,无刷新

页面里跳转通过<router-link :to=“{path:’cat’}”>跳转到小猫页面</router-link>来进行切换
在App.vue中添加以下代码

// 写法一
    <router-link to="/dog">小狗</router-link>
    <router-link to="/cat">小猫</router-link>
    <router-link to="/alpaca">羊驼</router-link>
  
// 写法二  通过path,to前面加冒号，动态
    <router-link :to="{path:'dog'}">小狗</router-link>
    <router-link :to="{path:'cat'}">小猫</router-link>
    <router-link :to="{path:'alpaca'}">羊驼</router-link>

运行结果：可以点击切换

image.png

7.设置参数

参数的设置,比如在cat后面加参数

var router = new Vrouter({
    routes:[
    {
      path:"/cat/:color",
      component:Cat,    },
    {
      path:"/dog",
      component:Dog,
    },
    {
      path:"/alpaca",
      component:Alpaca
    }
  ]

运行结果：必须在地址栏中cat后面给参数，不然出不来

image.png

参数的获取,通过$route.params.color；color是我们在main.js中cat后面给的参数名

Cat.vue

<template>
  <div>
    <img src="./cat.jpg" class="mycat">
    <p>我是一只猫</p>
    <p>我是一只猫颜色是{{ $route.params.color }}</p>
    <button @click="getParams">点击我获取地址栏参数</button>
  </div>
</template>
<script>
    export default {
        name: "cat",
        methods:{
          getParams:function(){
            console.log(this.$route.params.color);
          }
        }
    }
</script>
<style scoped>
.mycat{
  width:400px;
  height:400px;
}
</style>

运行结果：获取参数：

image.png

8.路由命名

设置的时候可以直接给路由加上name属性,可以通过配置params来带参数
main.js

routes:[
    {
      name:'mycat',
      path:"/cat/:color",
      component:Cat,
    },
    {
      name:'mydog',
      path:"/dog",
      component:Dog,
    },
    {
      name:'myalpaca',
      path:"/alpaca",
      component:Alpaca
    }
  ]

App.vue

     <router-link :to="{name:'mydog'}">小狗</router-link>
     <router-link :to="{name:'mycat',params:{color:'red'}}">小猫</router-link>
     <router-link :to="{name:'myalpaca'}">羊驼</router-link>

运行结果：点击小猫的链接，再点击按钮

image.png

9.地址重定向

页面初始进入就是小猫的界面

routes:[
    //地址重定向
    {
      path:"/",
      redirect:'/cat'
    },
    {
      name:'mycat',
      path:"/cat",
      component:Cat,
    },
    {
      name:'mydog',
      path:"/dog",
      component:Dog,
    },
    {
      name:'myalpaca',
      path:"/alpaca",
      component:Alpaca
    }
  ]

10.别名

routes:[
    //地址重定向
    {
      path:"/",
      redirect:'/cat'
    },
    {
      name:'mycat',
      path:"/cat",
      component:Cat,
      // 别名
      alias:'/cats'
    },
    {
      name:'mydog',
      path:"/dog",
      component:Dog,
    },
    {
      name:'myalpaca',
      path:"/alpaca",
      component:Alpaca
    }
  ]

运行结果 在地址栏将cat换为cats

image.png

11.linkActiveClass：通过配置这个选项来改变点击的样式

main.js

var router = new Vrouter({
  linkActiveClass:'active',
})

App.vue 中 style添加

.active{
    background: red;
  }

运行结果：当前点击显示的哪个组件，哪个的字体颜色就是红色

image.png

12.具名的路由 通过tag这个参数改变标签名

App.vue

    <router-link tag="span" :to="{name:'mydog'}">小狗</router-link>
    <router-link tag="span" :to="{name:'mycat'}">小猫</router-link>
    <router-link tag="span" :to="{name:'myalpaca'}">羊驼</router-link>

运行结果：链接样式变为span标签样式

image.png

路由嵌套

通过children来添加配置参数

1.创建两个子组件

Son.vue

<template>
      <div>
        我是Son组件
      </div>
</template>
<script>
    export default {
        name: "son"
    }
</script>
<style scoped>
</style>

Son1.vue

<template>
  <div>
    我是Son1组件
  </div>
</template>

<script>
    export default {
        name: "son1"
    }
</script>
<style scoped>
</style>

main.js

// 引入组件
import Son from '@/components/Son'
import Son1 from '@/components/Son1'

// 在dog中加入children
{
      name:'mydog',
      path:"/dog",
      component:Dog,
      children:[
        {
          path:'son',
          component:Son
        },
        {
          path:'son1',
          component:Son1
        },
      ]
    },

Dog.vue的template中加入

<router-view></router-view>

运行结果：

在地址栏dog后面输入son

image.png

在地址栏dog后面输入son1

image.png