vue路由模式有什么区别（vue路由技术解析）

import Vue from 'vue' //相当于加载vue.js

// VueRouter类拿过来，从刚才下载的npm包

import VueRouter from 'vue-router'

//加载一个组件HomeView

import HomeView from '../views/HomeView.vue'

//要使用这个路由，必须通过Vue.use()明确安装路由功能

Vue.use(VueRouter)

//常量，es复数，可以定义一个多个路由子项；对应的是一个数组;

//[],里面的格式：{

// path:'路径的地址',name:'名字小写',component:对应的组件;

//}

const routes = [

{

path: '/',

name: 'home',

component: HomeView

},

{

path: '/about',

name: 'about',

component: () => import('../views/AboutView.vue')

}

]

<!-- 跳转路由的链接，

to:跳转的地址,/默认index地址；/about;

Home About,首字母大写;

-->

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

<!-- 路由匹配的组件，渲染到router-view里面 -->

<router-view />

<template>

<div>

商品详情页面

<p>商品ID:{{ $route.params.gid }}</p>

</div>

</template>

{

path: '/goods/:gid',

name: 'Goods',

component: () => import('../views/Goods.vue')

}

<router-link to="/goods/1001">查看商品</router-link>