路由的使用
安装
cnpm install vue-router -S
1.设置路由规则
const routes = [
//页面1
{ path:'/foo', component: Foo },
//页面2
{ path:'/about', component: About },
]
2.配置路由规则
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
new Vue({
el:'#app'
router
})
3.设置路由切换后页面的显示位置
<router-view></router-view>
4.实现路由跳转
<router-link to="/about"></router-link>
测试
安装
新建文件夹及两个文件
分别为
<template>
<h1>首页</h1>
</template>
<template>
<h1>关于</h1>
</template>
src下新建router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/home', component: HomePage },
{ path: '/about', component: AboutPage },
]
const route = new VueRouter({
routes
})
export default route
main.js 配置
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<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>
运行结果:
参数传递
设置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/home', component: HomePage },
{ path: '/about', component: AboutPage },
{ path: '/detail/:id', component: DetailPage },
]
const route = new VueRouter({
routes
})
export default route
新建views Detail.vue
<template>
<h1>{{ id }}</h1>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
watch: {
$route (to, from) {
this.id = this.$route.params.id
}
},
created () {
let id = this.$route.params.id
this.id = id
}
}
</script>
效果
获取URL中的参数
Detail.vue
<template>
<div>
<h1>{{ id }}</h1>
<h2>{{ name }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
id: '',
name: ''
}
},
watch: {
$route (to, from) {
console.log('to', to)
console.log('from', from)
this.id = this.$route.params.id
}
},
created () {
let id = this.$route.params.id
this.id = id
let name = this.$route.query.name
this.name = name
}
}
</script>
路由的跳转
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-link to="/home">首页</router-link>|
<router-link to="/about">关于</router-link>|
<router-link :to="'/detail/' + id ">详情</router-link>|
<router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
id: 456,
types: 'type2'
}
},
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>
路由命名
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/home', component: HomePage },
{ path: '/about', component: AboutPage },
{ path: '/detail/:id', component: DetailPage, name: 'detail-page'},
]
const route = new VueRouter({
routes
})
export default route
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-link to="/home">首页</router-link>|
<router-link to="/about">关于</router-link>|
<router-link :to="'/detail/' + id ">详情</router-link>|
<router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>|
<router-link :to="{ name: 'detail-page', params: { id: '123' }, query: { name: 'abc' }}">详情</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
id: 456,
types: 'type2'
}
},
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>
效果:
路由的跳转
this.$router.push()
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/home', component: HomePage, name: 'home' },
{ path: '/about', component: AboutPage },
{ path: '/detail/:id', component: DetailPage, name: 'detail-page'},
]
const route = new VueRouter({
routes
})
export default route
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-link to="/home">首页</router-link>|
<router-link to="/about">关于</router-link>|
<router-link :to="'/detail/' + id ">详情</router-link>|
<router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>|
<router-link :to="{ name: 'detail-page', params: { id: '123' }, query: { name: 'abc' }}">详情</router-link>
|<a href="#" @click="goHome">跳转</a>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
id: 456,
types: 'type2'
}
},
methods: {
goHome () {
this.$router.push({name:'home'})
}
},
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>
效果
跳转到某个历史记录界面
this.$router.go(-1) 跳转到上一个界面
替换历史记录
this.$router.replace({name:'home'})
点击后退将进入home界面