路由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>

其他的頁面也類似

總結

以上是生活随笔為你收集整理的Vue路由基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。