vue vue-router 路由使用

安装

npm安装

npm install vue-router

在项目中使用

import Router from 'vue-router'
Vue.use(Router)

---

路由的使用

在main.js同级目录新建router文件夹,并在router文件夹中新建index.js,在index中配置各个路由对应的跳转的组件.因各个项目结构不同,请参考以下例子.

// index.js中的配置
import Vue from 'vue';
import Router from 'vue-router';
import home from '../components/home/home';
import left from '../components/home/children/left';
import right from '../components/home/children/right';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/',
        redirect: '/home'
    },
     {
       path: '/home',
       name: 'home',
       component: home,
       children: [
            // 匹配 /home
            { path: '', name:'left',component: left },
            // 匹配 /home/right
            { path: 'right', name:'right',component: right }
        ]
     }
   ]
});

当路由为 / 时，重定向为 /home 或者可以写为 redirect: {name:‘home’};
在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。
添加 mode: ‘history’ 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录
同时在main.js中需要配置使用router.js

import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

路径写为’./router’，会默认找router文件夹下的index文件，如您不是这么命名的,您可补全路径.
默认进入home页面会在home组件中的router-view中加载left组件.

<div>
    <router-link to="/home" tag='div'>左侧</router-link>
    <router-link :to={path:"/home/right"} tag='div'>右侧</router-link>
</div>
<keep-alive>
    <router-view>
        
    </router-view>
</keep-alive>

在编译之后，router-link会被渲染为 a 标签， to 会被渲染为 href，当 router-link 被点击的时候，url 会发生相应的改变
除了用to来实现跳转外，还可以使用编程式路由。

<div @click="goHome"></div>

methods:{
    goHome:function(){
        this.$router.push('/home');
        this.$router.push({path:'/home'});
        this.$router.push({name:'home'});
    }
}

对于有path的时候,params失效,但是query不失效

// 不生效
router.push({ path: '/home', params: { id: 1 }})
// params生效 /home/1
router.push({ name: 'home', params: { id: 1 }}) // 使用name方式
router.push({ path: `/home/1` }) // 直接在path上扩充
// query不受影响 /home?id=1
router.push({ path: '/home', query: { id: 1 }})

router.replace和push很像，但是他不会向history里添加新纪录

router.go(n); 在history里前进或者后退多少步
router.back(); 后退一步
router.forward(); 前进一步

向路由组件传参

const router = new VueRouter({
    routes: [
        { path: '/home/:id', component: home }
    ]
})
// 可以通过$router.params.id获取,也可以在router对象里设置props为true获取

路由守卫有全局守卫和单独的守卫，以下是单独的守卫
1.beforeRouteEnter
2.beforeRouteUpdate (2.2 新增)
3.beforeRouteLeave
需要注意的是beforeRouteEnter不能访问this，可以通过传一个回调给 next来访问组件实例。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

更多关于vue-router的API请点击这里;