1.下载路由配置
首先在项目文档总目录文件中 输cmd
在已生成黑色页面中输入 npm install vue-router@3(下载相匹配的路由) 下载路由并配置
2.使用路由
在项目文件根src中创建一个router文件夹并在里面配置一个 index.js文件
然后在main.js中配置引入 vue 和主页面APP.vue 引入路由.js并挂载
router 中 声名 rou(与上面名字对应)
在index.js中配置路由并使用
使用 引入 import 配置对象名字 from 链接 @/确定了在src中查找需要配置的文件(自己创建需要的文件)
配置路由 用 routes:【】对象方式创建
每个路由需要映射一个vue组件,component是组件配置对象
在根组件 配置 <router-view> </router-view> 谁是根节点 谁添加
<router-link tag=" 标签" active-class="一个属性 (确定划过改变css)" to="引入目录 之前import 名字 "> +应用的名字+</router-link>
配置完成
如果需要添加子路由 在当前页面配置<router-view> </router-view>
添加在需要添加子路由的引入中添加一个children:【】对象
并在需要点击跳转的页面添加
<router-link tag=" 标签" active-class="一个属性 (确定划过改变css)" to="引入目录 之前import 名字 "> +应用的名字+</router-link>
完成子路由配置
编程方式程序跳转
<li @click="go('/news')">新闻</li>
<li @click="go('/Pe')">体育</li>
<li @click="go('/play')">娱乐</li>
<script>
export default {
methods:{
go(url){
this.$router.push(url)
}}}
</script>
会报错 添加 下列代码 解决问题