码迷,mamicode.com
首页 > 其他好文 > 详细

vue路由

时间:2017-11-10 23:19:15      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:应用   from   mod   钩子   his   安装   cond   重定向   alias   

vue-router 2.0

也适合做大型单页应用(SPA):通过一个页面不让用户有刷新,把所有东西都加载在内存里,近年越来越普遍,例网易云音乐

vue本身不支持路由,是通过vue-router插件的形式支持的

惰性加载:需要的时候才进行加载

安装命令:npm install vue-router

新建main.js

import Vue from ‘vue‘

import VueRouter from ‘vue-router‘

vue.use(VueRouter)

const First={template:‘<div>first内容</div>‘}

const Second={template:‘<div>Second内容</div>‘}

const Home={template:‘<div>Homet内容</div>‘}

const router=new VueRouter({

        mode:‘history‘,

        base:__dirname,

        routes:[

                 {path:‘/‘,component:Home}

                {path:‘/first‘,component:first}

                {path:‘/second‘,component:second}

        ]

})

new Vue({

        router,

        template:`

            <div id=‘r‘>

                 <h1>导航</h1>

                 <ul>

                      <li><router-link to="/"></router-link></li>

                      <li><router-link to="/first">first</router-link></li>

                      <li><router-link to="/second">second</router-link></li>

                 </ul>

                  <router-view class=‘dsq‘> </router-view>

            </div>

          `

}).$mount(‘#app’)

新建router.js

import Vue from ‘vue‘

import Router from ‘./Router‘

 

子路由

    在根路由下扩展子路由

 路由中参数的确定

   name:‘‘

    <p>{{$router.name}}</p>

传参

  :to=‘{name:‘Home-First-First‘,params:{id:123}}‘

路由表的组件群

url传值

query append exact 

路由重定向

       redirect

alias

路由的过渡动画

钩子

   beforeEnter:(to,from,next)=>{

       

}

编程式导航

 

vue路由

标签:应用   from   mod   钩子   his   安装   cond   重定向   alias   

原文地址:http://www.cnblogs.com/yiyiyurou/p/7816655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!