Vue入门---- vue-router
生活随笔
收集整理的這篇文章主要介紹了
Vue入门---- vue-router
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
#簡介：
vue-router官網
用 Vue.js + vue-router 可以快速創建SPA（單頁應用程序），是非常簡單的。使用 Vue.js ，我們已經可以通過組合Component來組成應用程序。
引入 vue-router 的過程：將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。
##直接使用方法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>// 注意順序不能顛倒！！！<script src="D:\Github\vue\lib\vue.js"></script><script src="D:\Github\vue\lib\vue-router.js"></script><script>window.onload = function() {// 1. 準備templatevar A = Vue.extend({template: "<h3>我是A</h3>"})var B = Vue.extend({template: "<h3>我是B</h3>"})// 2. 準備routesconst routes = [{path: "/A",component: A,}, {path: "/B",component: B,}, {path: '*',// 默認打開redirect:'/A'}]// 3. 調用vue-routerconst router = new VueRouter({//這里等價于routes： routes，不要隨意寫其他的名字！！！routes,})// 4. 掛載到vue上new Vue({router,el: '#box'})}</script> </head> <body><div id="box"><div><router-link to="/A">A</router-link><router-link to="/B">B</router-link> </div><div><router-view></router-view></div></div> </body> </html>##模塊化使用方法
部分目錄結構如下：
├──node——modules ├──src├──assets├──components // 用來存放組件A.vue和B.vue│ ├──A.vue│ └──B.vue├──App.vue├──main.js├──router.config.js // router.config.js 用來存放路由信息└──...一、組件定義
A.vue
<template><h3>我是A</h3> </template><script> export default {} </script><style></style>B.vue
<template><h3>我是B</h3> </template><script> export default {} </script><style></style>二、路由信息
router.config.js
三、調用router并掛載到vue上
main.js
四、router-link與router-view
App.vue
總結
以上是生活随笔為你收集整理的Vue入门---- vue-router的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新增或编辑保存时出错后，页面无法再次编辑
- 下一篇： html5倒计时秒杀怎么做,vue 设