构建项目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
