Vue-router路由2.0的使用

来源：互联网发布：手机淘宝订单怎么删除编辑：程序博客网时间：2024/06/07 02:38

ps:我的第一个vue项目是用vue-router 0.7.3 版本，如今升级成webpack使用vue-router 2.x 版本不会用了，找了好多论坛，总结出了几个方法

直接上干货

首先是router.js文件

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router);export default new Router({    routes: [        {            path: '/',            name: 'index',            component: require('../components/index.vue')        },        {            path: '/category/first',            name: 'category.first',            component: require('../components/category/first.vue')        },        {            path: '/category/second',            name: 'category.second/:firstCategoryId',            component: require('../components/category/second.vue')        }    ]})

接下来是main.js

import Vue from 'vue'import VueResource from 'vue-resource'import App from './App'import router from './router'Vue.use(VueResource);Window.prototype.ApiUri = 'http://tikuapi.ztpet.cn';/* eslint-disable no-new */new Vue({    el: '#app',    router,    template: '<App/>',    components: {App}});

在模板中使用的时候
链接跳转
<router-link to="/category/first">分类</router-link>

在function中使用
this.$router.push({path: '/category/second'});

router-link传参
<router-link :to="{name:‘category.first‘,params: {firstCategoryId:1}}"></router-link>

才接触vue七个月，慢慢记笔记吧，新手勿喷，纯粹自己走过的坑

阅读全文

0 0