标签：基本 项目 简单的 rom 组件 lin 之间 content nts
前言：学习路由之前会觉得路由比较神秘，简单学习之后觉得路由还是比较简单的，或者说基本的路由使用还是比较简单的。普通的网站路由，是通过访问不同的地址，获取到不同的页面来实现网站各个页面之间的访问。vue的路由一般用于单页面，可以简单的理解成通过访问不同的路由地址，获取到不同的组件，实例化在页面指定的地方，以此来实现网站的路由。
1、在Vue项目中的使用
下面贴出了在vue中使用router的代码，分别是在不同的文件中。我们通过<router-link>标签跳转到对应的路由，通过<router-view>渲染路由映射的组件。我们创建的vue项目，默认根实例是App.vue,入口文件是main.js。从下面的代码可以看出来，我们把router中导出的路由放在了App.vue中，这也就代表着，我们可以在该项目的任何实例中访问设定的路由，通过访问不同级别的路由，显示出不同渲染的组件。
import router from ‘./router‘ //main.js
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘,
})
<template> //App.vue
<div id="app">
<router-link to="/BtContent">Go to demo(基础)</router-link>
<router-link to="/AssContent">Go to demo(组件)</router-link>
<router-view></router-view>
</div>
</template>
import Vue from ‘vue‘ //router/index.js
import Router from ‘vue-router‘
import BtContent from ‘@/study/baseData/BtContent‘
import AssContent from ‘@/study/component/AssContent‘
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/BtContent‘,
name: ‘BtContent‘,
component: BtContent
},
{
path: ‘/AssContent‘,
name: ‘AssContent‘,
component: AssContent
}
]
})
2、
标签：基本 项目 简单的 rom 组件 lin 之间 content nts
原文地址：https://www.cnblogs.com/liangshibo/p/13051526.html
