您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

17Vue路由(vue-router)

发布时间：2023-04-10 21:08:31编辑：雪饮阅读（）

安装路由
npm install vue-router –save
准备我们要路由的页面
假定这里我要在首页和新闻页进行路由，则我们分别准备首页index.vue如
<template>
    <div id="index">
        这里是首页
    </div>
</template>
还有新闻页news.vue
<template>
    <div id="news">
        这里是新闻页
    </div>
</template>
配置路由
我们将已经安装的vue-router与我们将要进行路由的两个vue页面配置起来
在src/main.js如
import Vue from 'vue'
import App from './App.vue'
//导入vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//创建组件
import Index from './components/Index.vue';
import News from './components/news.vue';
//配置路由
const routes=[
  //首页
  {path:'/',component:Index},
  //新闻页
  {path:'/news',component:News},
  //匹配不到路由任何路由时进入首页
  {path:'*',component:Index}
];
//实例化VueRouter
const router=new VueRouter({routes})
new Vue({
  el: '#app',
  //挂载路由
  router,
  render: h => h(App)
})
 
路由的tab放置页
路由的tab切换所在页面就是main.js中所指向的默认的App.vue
那么我们需要在App.vue上面使用router-view以及router-link（有点像是a标签）
App.vue如
<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr/>
    <router-view></router-view>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{},
    }
</script>
可能会遇到的问题
"export 'default' (imported as 'VueRouter') was not found in 'vue-router'
我这里是vue2.9.6，那么卸载掉vue-router，安装对应你本地vue合适的版本
npm uninstall vue-router
npm i vue-router@3.5.2
然后重新npm run dev