vue路由

Posted 2020-10-14 依依雨柔

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)=>{

       

}

编程式导航