Vue之路由跳转-蒲公英云

Vue之路由跳转

亦凉 2022-03-17 05:17 423阅读 0赞

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。

vue路由配置的步骤：

https://router.vuejs.org/
1.安装 
npm install vue-router  --save   / cnpm install vue-router  --save
2、引入并 Vue.use(VueRouter)   (main.js)
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
3、配置路由
    (1)、创建组件 引入组件
    (2)、定义路由  （建议复制）
        const routes = [
          { path: '/home', component: Home },
          { path: '/bar', component: News },
          { path: '*', redirect: '/home' }   /*默认跳转路由*/
        ]
    (3)、实例化VueRouter
        const router = new VueRouter({
          routes // （缩写）相当于 routes: routes
        })
    (4)、挂载
    new Vue({
      el: '#app',
      router，
      render: h => h(App)
    })
    (5)、根组件的模板里面放上这句话   <router-view></router-view>         
    (6)、路由跳转
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

下面我用代码来做详细讲解：

目录结构
在这里插入图片描述

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//导入并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  {  path: '/home', component: Home },
  {  path: '/news', component: News },
  {  path: '*', redirect: '/home' }//默认跳转路由
]
//3.实例化VueRouter 注意，名字一定不能错
const router = new VueRouter({ 
  routes // （缩写）相当于 routes: routes
})
//4.挂载路由
/* eslint-disable no-new */
new Vue({ 
  el: '#app',
  router,
  components: {  App },
  template: '<App/>'
})
//5.根组件的模板里放上这句话 <router-view></router-view>

Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div id="home">
        我是首页组件
        <br>
    </div>
</template>  
<script>
export default { 
    data(){ 
        return { 
            msg:'我是一个home组件',
            title:'今天 2019/2/21'
        }
    }
}
</script>

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
 </div>
</template>
<script>
export default { 
 data(){ 
     return { 
         msg:'我是一个news组件',
     }
 }
}
</script>

App.vue

<template>
  <div id="app">
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default { 
  name: 'App',
  data(){ 
    return{ 
      msg:'你好vue'
    }
  }
}
</script>
<style>
</style>