创建一个新的项目,依然先不要装路由,自己来装,初始化项目之后,在项目根目录执行:
cnpm install vue-router --save
在项目中安装路由。然后在main.js文件中引入安装的路由才能使用,固定格式
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
这样路由的环境便搭建好了,让我们开启第一步,做一个最简单的路由吧
首先我们要新建一个router路由对象,我们采用命名路由规则,因为一般这样的比较常用,在main.js中,格式大概为:
const router=new VueRouter({
routes:[{
path: '/xiao', //这里不命名,只用‘/’可直接访问,命名了访问需要加上名字参数
name: 'Helloworld',
component:HelloWorld//页面
}
]
})
这里导航了Helloworld页面,则需要将Helloworld页面导入进来,
import HelloWorld from './components/HelloWorld'
完成之后需要将router对象注入vue对象,注:这一步很容易忘,一定要记住
new Vue({
el: '#app',
router, //注入
components: { App },
template: '<App/>'
})
这时再通过
<router-view></router-view>
在app组件中插入显示的位置
注意:重要知识->
为了防止main.js中的代码过于繁杂,我们将路由的使用独立出来,这一点很容易,在src目录下新建一个文件夹,比如router,
在该文件夹下创建js文件,比如index.js,将引入路由组件的代码转移到这里面,如:
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //@符号表示根目录
Vue.use(VueRouter)
export default new VueRouter({ //注意,为了使外界能识别路由对象,这个地方直接导出
routes:[{
path: '/xiao',
name: 'Helloworld',
component:HelloWorld
}
]
})
然后在main.js文件中导入import router from './router',同样可以实现,main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这样便实现了路由代码简化
跳转路由:
多个路由页面的显示,在路由配置文件如上面的index.js文件中,给每个页面注册路由,在控制显示的<router-view>页面通过
<router-link to="/xiao">luyou</router-link>
//to里面的内容根据需要改变
示例,一个hellworld页面和一个learn页面,通过路由来控制显示哪一个
//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'
Vue.use(VueRouter)
export default new VueRouter({
routes:[{
path: '/xiao',
name: 'Helloworld',
component:HelloWorld
},
{
path: '/lea',
name: 'Learn',
component:Learn
}
]
})
//跳转显示路由页面代码
<ul>
<router-link to="/xiao">luyou</router-link> //默认渲染为<a>标签,可加tag="li"属性渲染为li标签
<router-link to="/lea">learn</router-link>
</ul>
<router-view></router-view>
既可通过点击选择页面
<router-link>默认渲染为<a>标签,可加tag="li"属性渲染为li标签
动态路由:
在路由配置的地方通过加"/:参数"增加参数配置,然后在路由跳转的地方传入参数,在显示的页面通过"this.$route.params.参数"来接收。做一个传递参数‘12345’的示例:
//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'
Vue.use(VueRouter)
export default new VueRouter({
routes:[{
path: '/xiao/:id', //增加参数id
name: 'Helloworld',
component:HelloWorld
},
{
path: '/lea',
name: 'Learn',
component:Learn
}
]
})
//跳转
<template>
<div id="app">
<img src="./assets/logo.png">
<ul>
<router-link to="/xiao/12345">luyou</router-link> //传递参数
<router-link to="/lea">learn</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>
//显示
<template>
<div class="hello">
小伍的路由来喽,^_^---
{{this.$route.params.id}} //接收参数
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
补充内容(一周后补充):
路由和小程序里的tab相同,我们需要在路由被选中后颜色会有变化,这样才能方便看出选中的页面是哪一个(这里不得不说一下,腾讯就是牛皮,小程序里面的好多内容都比vue实用,虽然是仿照vue写的,但我个人觉着小程序更能使开发变得容易),这里我们打开浏览器开发者工具,找到路由跳转标签<router-link>,会发现里面有默认的class,里面有名为“router-link-active”的样式,我们在全局app.vue里面描绘该样式,就可以实现选中变色
.router-link-active{
color: red
}
这里呢,vue提供了api使其变得简单,在路由配置哪里,实用对象
linkActiveClass:'active',
这样 router-link-active就会被active代替,就可以简写成active,同时好有一个默认样式“router-link-exact-active”,这个为精准样式,意思就是前一个样式选中后父级也会被选中,而这个精准样式只会选中一个,父级不会被选中。
写一个不精准的示例
//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'
import Base from '@/components/base'
import Notfind from '@/components/notfind'
Vue.use(VueRouter)
export default new VueRouter({
linkActiveClass:'active',
routes:[
{
path:'*',
component:Notfind
},
{
path:'/',
redirect:'/lea'
},
{
path: '/xiao/:id',
name: 'Helloworld',
component:HelloWorld
},
{
path: '/lea',
name: 'Learn',
component:Learn,
children:[
{
path:'bases',
component:Base
}
]
}
]
})
//全局样式
<template>
<div id="app">
<img src="./assets/logo.png">
<ul>
<router-link :to="{name:'Helloworld',params:{id:id}}">luyou</router-link>
<router-link to="/lea">learn</router-link>
</ul>
<button type="button" @click="tiao">learn</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return{
id:'具名路由真好'
}
},
methods:{
tiao(){
this.$router.push('/lea');
}
}
}
</script>
<style>
.active{
color: red
}
#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>