vue-router

• • 1、為什么要路由
  • 2、路由配置
  • 3、使用路由

1、為什么要路由

1. 用于組件與組件之間的跳轉 2. 頁面跳轉 3. 參數傳值

2、路由配置

main.vue

content.vue

myvue.vue

router目錄下的index.js，用于加載路由配置

// vue-router配置 import Vue from 'vue' import VueRouter from 'vue-router' // 從node_modules 中導入安裝好的vue-router// 導入自定義組件 import Content from '../components/content' import Main from '../components/main'import myvue from "../components/myvue";// 安裝路由 Vue.use(VueRouter)// 配置路由導出 export default new VueRouter({routes: [{// 指定路由路徑path: '/content',name: 'content',// 跳轉的組件component: Content,children: [ // 路由嵌套{path: '/myvue',component: myvue}]}, {path: '/main',name: 'main',component: Main}] })

3、使用路由

在app.Vue 里面展示路由鏈接和視圖

<!-- 主模板 --> <template><div id="app"><img src="./assets/logo.png"><HelloWorld/><!-- 跳轉鏈接 --><router-link to="/main">首頁</router-link><router-link to="/content">content page</router-link><!-- 展示視圖 --><router-view></router-view></div> </template><script> import HelloWorld from './components/HelloWorld'export default {name: 'App',components: {HelloWorld} } </script><style> </style>

main.js程序入口導入router

// 導包 import Vue from 'vue' import App from './App'import router from './router' // 自動掃描router里面的路由配置 index.jsnew Vue({el: '#app',router, // 指定路由components: { App },template: '<App/>' })

總結

以上是生活随笔為你收集整理的vue-router 路由跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

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