Vue路由简单使用

1.定义导航

2.定义路由出口，路由匹配到的组件将会渲染到此处

3.定义路由(路径和组件名)

4.创建路由实例

5.挂载上一步创建的路由由实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-Router的基本使用</title>
   
    <script src="./vue.min.js"></script>
         
    <script src="./vue-router.js"></script>
    <!-- 关于引入文件的问题，先引入vue.js文件，然后再引入router.js文件 -->
</head>
<body>
       <div id="app">
        <h1>路由的使用</h1>
           <!-- 1.定义导航 -->
           <router-link to="/home">主页</router-link>
           <router-link to="/server">服务</router-link>
           <router-link to="/personal">个人</router-link>
           <!-- 2.定义路由出口，路由匹配到的组件将会渲染到此处 -->
           <router-view></router-view>
       </div>
    <script>

        const home={
            template:`<div>主页</div>`
        }
        const server={
            template:`<div>服务</div>`
        }
        const personal={
            template:`<div>个人</div>`
        }
        //  3.定义路由(路径和组件名)
        // 一定是routes,此变量不能更改
         const routes=[
        {
            path:"/home",
            component:home
        },
        {
            path:"/server",
            component:server
        },
        {
            path:"/personal",
            component:personal
        }
      ]
        // 4.创建路由实例
  const router=new VueRouter({
          routes,
      })
    //   5.挂载上一步创建的路由由实例
    const app= new Vue({
            el:"#app",
            router,
            data(){
                return {
                  
                }
            }
        })
    </script>
</body>
</html>

Vue路由简单使用

悦读