路由index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Me from '../views/me.vue'
import About from "../views/About.vue"
import Centor from "@/views/Center.vue"
import _404 from "../views/404.vue"
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
alias:"/index", //别名 访问 /index也是访问 Home组件
component: Home,
},
{
path:'*', //未找到视图则跳转404
name:'404',
component: _404
},
{
path:"/s",
redirect:"/me/20" //重定向
},
{
path: '/about/:userId',
name: 'About',
component: About
},
{
path:"/me/:id",
component:Me
},
{
path:"/me",
name:'Me',
component: Me,
children:[ //子路由
{
path:"center", // /me/:id/center
component:Centor //在对应路径下 显示在 Me组件的routerView中
},
]
},
{
path: "/all",
// 命名视图 在router-view name属性中指明名字
components:{
h:Home,
a:About,
m:Me
}
}
]
const router = new VueRouter({
routes,
mode:"history" //去除 路径中的/#/
})
export default router
App.vue
<template>
<div id="app">
<div class="left">
<div><router-link to="/">主页</router-link> </div>
<!-- 类似与rustful风格 传递参数 参数在路由中定义 -->
<div><router-link :to="'/about/'+userId">关于</router-link></div>
<!-- 命名路由 name 就是在router中注册的路由名称,parames就是需要传递的传输 -->
<div><router-link :to="{name:'Me',params:{id:20}}" >个人</router-link></div>
<!-- 这个是命名视图显示所有的组件 与下面的视图 h、a、m 一起的-->
<div><router-link to="/all" >所有</router-link></div>
</div>
<router-view class="content" ></router-view>
<!-- 命名视图 -->
<router-view name="h"></router-view>
<router-view name="a"></router-view>
<router-view name="m"></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},data() {
return {
userId:10
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.left>div{
width: 100px;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.left{
background-color: #000;
height: 100vh;
}
a{
color: #999999;
text-decoration: none;
}
a:hover{
color: pink;
}
.content{
width: 80vw;
}
</style>
me.vue
<template>
<div>
<h1>个人信息</h1>
<!-- $route.params.id 可以获取路由路径的值 url /me/10 ==> /me/:id -->
<h1>{{$route.params.id}}</h1>
<!-- 显示子路由的内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"me",
data() {
return {
}
},
props:{},
data() {
return {
}
},
}
</script>
<style>
</style>
404.vue
<template>
<div><h1>未找到页面,404</h1></div>
</template>
<script>
export default {
}
</script>
<style>
</style>
其他的页面也类似