组件间跳转
在上次实现了我们的第一个页面之后,我们现在用router实现页面间的跳转。
参考基于 Webpack & Vue & Vue-Router 的 SPA 初体验
首先我们增加一个简单的组件About.vue
About.vue
写一个简单的组件。
<template>
<div>
<h1>About me</h1>
<br>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'I am a full stack developer!'
}
}
}
</script>
router
把之前的router改写一下,加入about的路由。
routes: [
{
path: '/',
component: require('../components/Hello')
},
{
path: '/hello',
name: 'Hello',
component: require('../components/Hello')
},
{
path: '/about',
name: 'About',
component: require('../components/About')
}]
App.vue
<template>
<div id="app">
![](./assets/logo.png)
<div id="menu">
<router-link to="/hello">Hello</router-link>
<router-link to="/about">About</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</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>
在之前的App.vue加入了
<div id="menu">
<router-link to="/hello">Hello</router-link>
<router-link to="/about">About</router-link>
</div>
router-link组件可以在具有路由功能的应用中导航,它会被渲染成a标签。router-link介绍
嵌套路由
我们在实际的开发中,页面通常都是由多层嵌套的组件组合而成的。
我们举个例子,Login页面进到Main页面后,Main页面有两个子组件,Hello和About。
image.png
我们需要在components中添加Login和Main
Login.vue
<template>
<div>
<div>
<input v-model="username" placeholder="用户名">
</div>
<div>
<input v-model="password" placeholder="密码">
</div>
<button v-on:click="login">登录</button>
</div>
</template>
<script>
import router from '../router'
export default {
name:'login',
data:function(){
return {
username:'',
password:''
}
},
methods:{
login:function(){
router.push({path:'/main'});
}
}
}
</script>
点击登录后,router路由到/main。
Main.vue
<template>
<div>
![](../assets/logo.png)
<div id="menu">
<router-link to="/main/hello">Hello</router-link>
<router-link to="/main/about">About</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'main'
}
</script>
我们可以看到在Main的模板中添加了router-view
。
route
在路由文件index.js中
routes: [{
path: '/',
component: require('../components/Login')
}, {
path: '/main',
component: require('../components/Main'),
children: [{
path: 'hello',
component: require('../components/Hello')
}, {
path: 'about',
component: require('../components/About')
}]
}]
用children来配置main的嵌套路由,我们可以按着这个路子嵌套多层路由。
网友评论