vue路由

我使用的vue-cli的版本市 @vue/cli 4.4.6

首先创建项目： vue create myvue按照指示创建项目

然后删除helloworld的代码，比如HelloWorld组件等

 

创建Home.vue

<template>
    <div>
        <h1>我要一步一步往上爬</h1>
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

About组件：About.vue

<template>
    <div>
        <h1>在最高点乘着叶片往前飞</h1>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default {
        name: "About",
        computed: {
            name: function () {
                // 获取参数的一种方式
               return this.$route.query.name
            }
        }
    }
</script>

<style scoped>

</style>

User.vue组件：

<template>
    <div>
        <h1>小小的天有大大的梦想</h1>
        <h2>{{userPk}}</h2>
<!--        <h2>{{this.$route.params.userPk}}</h2>-->
    </div>
</template>

<script>
    export default {
        name: "User",
        // 计算属性
        computed: {
            userPk(){
                // 获取参数的另外一种方式
                return this.$route.params.userPk
            }
        }
    }
</script>

<style scoped>

</style>

路由目录下的index.js文件：

import Vue from 'vue'
import VueRouter from "vue-router"
import Home from "../components/Home";
import About from "../components/About";
import User from "../components/User";

Vue.use(VueRouter) // 使用路由插件
const routes = [
    {
        path: '/',
        redirect: '/home' // 首次重定向到home组件
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:userPk', // 动态路由的方式
        component: User
    }
]

const  router = new VueRouter({
    mode: 'history', // history模式，默认是hash模式
    routes
})

export default router

App.vue组件：

<template>
    <div id="app">
        <router-link to="/home">Home</router-link>
        <button @click="myAbout">About</button>
        <router-link :to="'/user/'+userPk">User</router-link>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data: function() {
          return {
              userPk: 12
          }
        },
        methods: {
            myAbout(){
                // 使用参数的方式
                this.$router.push({
                    path: '/about',
                    query: {
                        name: 'jeffchan'
                    }
                })
            }
        }
    }
</script>

main.js的内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'


new Vue({
  router,
  render: h => h(App) // 渲染App.vue
}).$mount('#app') // 相当于 el: '#app'

上述中有两种获取参数的方式：

 this.$route.params.userPk

 this.$route.query.name