标签：cts const default 传递 method cnpm def 微软 问题
Vue路由
功能就是在不重新请求页面的情况下，更新页面视图；
一、安装：
1）cnpm install vue-router -s
2）依赖：cnpm install
二、设计路由界面：
创建components文件夹，文件夹内分别创建user、Home组件
*user.vue* <template> <div>user</div> </template> *Home.vue* <template> <div>Home</div> </template>
三、创建静态路由表：
在src下创建routes.js
import Home from ‘@/components/Home.vue‘ import User from ‘@/components/user/user.vue‘ export const routes = [ {path:‘/‘,component:Home}, {path:‘/user‘,component:User} ]
四、引入路由模块并使用：
在main.js中引入路由模块并使用
import Vue from ‘vue‘ import App from ‘./App.vue‘ import VueRouter from ‘vue-router‘ //1.引入路由模块 import {routes} from ‘./routes‘ //2.引入静态路由表 Vue.use(VueRouter); //3.使用路由模块 //4.创建一个VueRouter模块的实例 const router = new VueRouter({ routes:routes }); new Vue({ el: ‘#app‘, router,//5.把router实例放入到vue实例中 render: h => h(App) })
五、路由使用：
在App.vue中：
<template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8"> <h1>Routing</h1> <router-view></router-view> </div> </div> </div> </template>
六、路由跳转实现两种方式：
1）通过html中的<router-link to="路由地址">标签实现：
<template> <div> <div> <span><router-link to="/home">首页</router-link></span> <span><router-link to="/products">商品</router-link></span> </div> <router-view></router-view> </div> </template>
2）通过js实现：
this.$router.push("/Products/1");
//this指向问题：使用箭头函数；
this.axios({ method: ‘get‘, url: ‘‘ }).then(function(resp){ //无法找到本组件； console.log(this); this.$router.push("/home"); }) this.axios({ method: ‘get‘, url: ‘‘ }).then((resp)=>{ console.log(this); this.$router.push("/home"); })
七、参数传递：
1）设置参数：router.js
export const routes = [ {path:‘/‘,component:Home}, {path:‘/user/:id‘,component:User} ]
2）传递参数：
<router-link to="/products/123">商品</router-link>
3）接收参数：
<script> export default { name: "products", data(){ return{ id:this.$route.params.id } } } </script>
标签：cts const default 传递 method cnpm def 微软 问题
原文地址：https://www.cnblogs.com/Tractors/p/11100338.html
