Vue的基础使用

路由的使用步骤

1. 下载路由

npm i vue-router

2. 引入路由

import VueRouter from "vue-router";

3.注册全局组件

Vue.use(VueRouter)

4.创建路由规则

这里创建了四个页面组件的路由规则

const routes = [{
            path: "/",
            // redirect: "/friend" //重定向，打开页面跳转到指定的页面
            redirect: "/my" //重定向到动态路由需要传值，如果想可传可不传值，需要在路径的参数名后面加一个"?"
        },
        {
            path: "/find", //定义路由路径
            component: () =>
                import ("./views/find.vue") //按需引入
        },
        {
            // 带参数的路由：动态路由
            path: "/my/:name?", //定义路由路径
            component: () =>
                import ("./views/my.vue") //按需引入
        },
        {
            path: "/friend", //定义路由路径
            component: () =>
                import ("./views/friend.vue"), //按需引入
            name: 'friend'  //name属性是用来编程式导航跳转到指定的页面
        },
        {
            path: "*",  //"*":当没有找到页面时跳转到404页面
            component: () =>
                import ("./views/NotFound.vue")
        }
    ]

5.使用路由规则生成路由对象

const router = new VueRouter({
        routes: routes,
        mode: "history" //切换路由模式
    })

6. 把路由对象注入到vue实例中

new Vue({
    router: router, //注入
    render: h => h(App),
}).$mount('#app')

7. 挂载

   页面组件会出现在挂载点的位置

       <!-- 路由挂载点 -->
      <router-view></router-view>