（17）打鸡儿教你Vue.js

ゝ一纸荒年。 2021-09-29 04:32 143阅读 0赞

vue-router

![image.png][]

<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>

/* 创建路由器  */
    var router = new VueRouter()

![image.png][image.png 1]

创建组件：

创建Router:

var router = new VueRouter()

映射路由:

router.map({
    	'/home': { component: Home },
    	'/about': { component: About }
    })

key是路径，value是组件

<div class="list-group">
    	<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    	<a class="list-group-item" v-link="{ path: '/about'}">About</a>
    </div>

v-link指令跳转到指定路径

<router-view></router-view>

启动路由

var App = Vue.extend({})
    router.start(App, '#app')

router.start(App, ‘\#app’) 表示router会创建一个App实例

创建组件：创建单页面应用需要渲染的组件  
创建路由：创建VueRouter实例  
映射路由：调用VueRouter实例的map方法  
启动路由：调用VueRouter实例的start方法

使用v-link指令  
使用标签

router.redirect

html

使用v-link指令  
使用标签

router.redirect

router.redirect({
    '/': '/home'
    })

router.redirect方法用于为路由器定义全局的重定向规则

路径/home/news和/home/message

一个路径映射一个组件

组件构造器：

var Home = Vue.extend({
    template: '#home',
    data: function(){
     return {
     msg: 'hello'
     }
     }
    })
    
    var News = Vue.extend({
     template: '#news'
    })
    
    var Message = Vue.extend({
     template: '#message'
    })

路由映射

router.map({
    '/home': {
    component: Home,
    // 定义子路由
    subRoutes: {
    '/news': {
     component: News
     },
     '/message': {
     component: Message
     }
     }
    },
    '/about': {
     component: About
    }
    })

<!DOCTYPE html> 
     <html> 
     
      <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/> 
     <link rel="stylesheet" href="assets/css/custom.css" /> 
     </head> 
     
      <body> 
     <div id="app"> 
     <div class="row"> 
     <div class="col-xs-offset-2 col-xs-8"> 
     <div class="page-header"> 
     <h2>Router Basic - 02</h2> 
     </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2 col-xs-offset-2"> 
     <div class="list-group"> 
     <a class="list-group-item" v-link="{ path: '/home'}">Home</a> 
     <a class="list-group-item" v-link="{ path: '/about'}">About</a> 
     </div> 
     </div> 
     <div class="col-xs-6"> 
     <div class="panel"> 
     <div class="panel-body"> 
     <router-view></router-view> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     
      <template id="home"> 
     <div> 
     <h1>Home</h1> 
     <p>{
       {msg}}</p> 
     </div> 
     <div> 
     <ul class="nav nav-tabs"> 
     <li> 
     <a v-link="{ path: '/home/news'}">News</a> 
     </li> 
     <li> 
     <a v-link="{ path: '/home/message'}">Messages</a> 
     </li> 
     </ul> 
     <router-view></router-view> 
     </div> 
     </template> 
     
      <template id="news"> 
     <ul> 
     <li>News 01</li> 
     <li>News 02</li> 
     <li>News 03</li> 
     </ul> 
     </template> 
     <template id="message"> 
     <ul> 
     <li>Message 01</li> 
     <li>Message 02</li> 
     <li>Message 03</li> 
     </ul> 
     </template> 
     
      <template id="about"> 
     <div> 
     <h1>About</h1> 
     <p>This is the tutorial about vue-router.</p> 
     </div> 
     </template> 
     
      </body> 
     <script src="js/vue.js"></script> 
     <script src="js/vue-router.js"></script> 
     <script> 
     var Home = Vue.extend({ 
     template: '#home', 
     data: function() { 
     return { 
     msg: 'Hello, vue router!' 
     } 
     } 
     }) 
     
      var News = Vue.extend({ 
     template: '#news' 
     }) 
     
      var Message = Vue.extend({ 
     template: '#message' 
     }) 
     
      var About = Vue.extend({ 
     template: '#about' 
     }) 
     
      var router = new VueRouter() 
     router.redirect({ 
     '/': '/home' 
     }) 
     router.map({ 
     '/home': { 
     component: Home, 
     // 定义子路由 
     subRoutes: { 
     '/news': { 
     component: News 
     }, 
     '/message': { 
     component: Message

$route.path 
    当前路由对象的路径
    
    $route.params 
    包含路由中的动态片段和全匹配片段的键值对
    
    $route.query 
    包含路由中查询参数的键值对
    
    $route.router 
    路由规则所属的路由器
    
    $route.name 
    当前路径的名字

执行以下命令安装vue cli

npm install -g vue-cli

使用vue-webpack-simple模板

运行Git Bash Here

vue init webpack-simple my-webpack-simple-demo

![image.png][image.png 2]

![image.png][image.png 3]

安装项目依赖

cd my-webpack-simple-demo
    npm install

运行示例

npm run dev

发布

npm run build

使用vue-webpack模板

vue init webpack my-webpack-demo

安装依赖

cd my-webpack-demo
    npm install

运行示例

npm run dev

发布

npm run build

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/458f15a67bd34ae3bc1290cc9bb6dbec.png
[image.png 1]: /images/20210724/54333082664e44648a50f33a9ecb27cb.png
[image.png 2]: /images/20210724/ab17783539554165a7c3c6b82153701c.png
[image.png 3]: /images/20210724/b042a20df8444b55a270424fe6c32e8a.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/a8cd86cbb07c45d8bb62acd8f71f7dd6.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/e8df6afbd7c442d98356db23f3d047cb.png