vue 路由入门(vue-router)

Posted 2020-12-25 candy-yao

新建的 js 文件如下：

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter) //全局使用该组件

// 声明常量
const first = {
    template:‘<div>first内容</div>‘
}
const second = {
    template:‘<div>second内容</div>‘
}
const Home = {
    template:‘<div>Home内容</div>‘
}

const router = new VueRouter({
    mode:‘history‘,
    base:__dirname,//基础路径
    routes:[ //路由
        {
            path:‘/‘,
            title:‘首页‘,
            component:Home
        },//当根目录时，显示Home
        {
            path:‘/first‘,
            component:first
        },
        {
            path:‘/second‘,
            component:second
        }
    ]
})

new Vue({
    router,
    template:`
    <div id="r">
        <h1>导航</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>               
            </li>                
            <li>
                <router-link to="/first">first</router-link>
            </li>
            <li>
            <router-link to="/second">second</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    `
}).$mount(‘#app‘)//f发布到app中去