葫芦的运维日志
下一篇
搜索
上一篇
浏览量 3579
2019/01/09 14:38
main.js
{path:"*",redirect:'/'} 支持模糊匹配,任何未匹配到的路径都会跳转到根目录
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'
Vue.use(VueRouter)
const routes=[
{path:'/',component:Home},
{path:'/menu',component:Menu},
{path:'/admin',component:Admin},
{path:'/about',component:About},
{path:'/login',component:Login},
{path:'/register',component:Register},
{path:"*",redirect:'/'}
]
const router=new VueRouter({
routes,
mode:'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
Header.vue
<router-link tag="div" :to="homeLink" class="nav-link">主页</router-link>
router-link 默认转换到html是a标签,但是可以通过tag来更改标签。
<template>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="py-2" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="d-block mx-auto">
<circle cx="12" cy="12" r="10"></circle>
<line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
<line x1="9.69" y1="8" x2="21.17" y2="8"></line>
<line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
<line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
<line x1="14.31" y1="16" x2="2.83" y2="16"></line>
<line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
</svg>
</a>
<router-link to="/" class="navbar-brand">Pizza点餐系统</router-link>
<ul class="navbar-nav">
<li>
<router-link tag="div" :to="homeLink" class="nav-link">主页</router-link>
</li>
<li>
<router-link to="menu" class="nav-link">菜单</router-link>
</li>
<li>
<router-link to="admin" class="nav-link">管理</router-link>
</li>
<li>
<router-link to="about" class="nav-link">关于我们</router-link>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<router-link to="login" class="nav-link">登录</router-link>
</li>
<li>
<router-link to="register" class="nav-link">注册</router-link>
</li>
</ul>
</nav>
</header>
</template>
<script>
export default {
name: "Header",
data(){
return{
homeLink:'/'
}
}
}
</script>
<style scoped>
</style>
葫芦的运维日志
打赏
上一篇
搜索
下一篇