基于第一个vue-cli进行测试学习;
先查看node_modules中是否存在vue-router
vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
安装
npm install vue-router --save-dev
如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:
1、先删除没用的文件
2、components目录下存放我们自定义的组件
3、定义组件
content.vue
<template>
<h1>content页面</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
main.vue
<template>
<h1>主页面</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
4、配置安装路由在src下创建router文件 用来存放路由
index.js
//导入路由插件
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:"/content",
//路由名称
name:"content",
//跳转的组件 注意这里不是 字符串
component:Content
},
{
path:"/main",
name:"main",
component:Main
}
]
})
5、在main.js中配置路由
import Vue from 'vue'
import App from './App'
//导入创建的路由配置
import router from "./router"
Vue.config.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
6、在App.vue中使用路由
<template>
<div id="app">
<h1>测试</h1>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/main">首页</router-link>
<router-link to="/content">Content页面</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>