vue基础：路由跳转的几种方式。

灰太狼 2022-03-15 12:18 406阅读 0赞

$nbsp 小谷刚开始学习vue，可以说是完全不懂了。想要实现h5中的跳转，都成了是头疼的事，进过查资料，得出以下总结，希望能对大家有用，也是对知识的记载。  
1.最简单的路由跳转方式。

<router-link to="/home">我的订单</router-link>

这种方法也是小谷最早实现的。  
1.首先给大家看下我的目录（创建项目的时候已经默认安装的了router，如果没有安装的大家百度回来再看）  
![在这里插入图片描述][20190302160323710.png]  
2.在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'
    import ElementUI from 'element-ui'//这个无所谓
       import 'element-ui/lib/theme-chalk/index.css'
       Vue.use(ElementUI)
    
    Vue.use(VueRouter)
    
    Vue.config.productionTip = false
    
    //1.创建组件
    import Home from './components/Home.vue';
    import News from './components/News.vue';
    import Ewallet from './components/Ewallet.vue';
    import Userset from './components/Userset.vue'
    
    //2.配置路由 注意，名字一定不能错
    const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
      {  path: '/home', component: Home },
      {  path: '/news', component: News },
      {  path: '/ewallet', component: Ewallet },
      {  path: '/userset', component: Userset},
      {  path: '*', redirect: '/ewallet' }//默认跳转路由
      
    ]
    
    //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>

3.Ewallet.vue中添加`<router-link to="/home">我的home</router-link>`

<template>
      <div id="app-content">
              <router-link to="/home">我的home</router-link>
    
      </div>
    </template>
    
    <script> </script>
    
    
    <style scoped> </style>

**3.这里用Home.vue演示，就将路由跳转，如果你想在Home.vue再跳出来，就在这里面添加**

<template>
      <div class="home">
        <h1>{
       { msg }}</h1>
        <h2>Essential Links</h2>
        
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
    
    
    <style> </style>

点击前  
![在这里插入图片描述][20190302163011290.png]  
点击后  
![在这里插入图片描述][2019030216312764.png]

[20190302160323710.png]: /images/20220315/ed2b4b60e84c4f9b94b8287ef4665d9d.png
[20190302163011290.png]: /images/20220315/0a50cbe86e4a40d5ba9c9ecb3892ca75.png
[2019030216312764.png]: /images/20220315/367fc291d7104a95bd17214a613d61b9.png