huanggr
当访问错误路径时，提示404
404.vue中的内容
1 2 3 4 5 | <template> <div class="hello"> <h1>404，您访问的页面不存在！！！</h1> </div> </template> |
route文件夹下index.js添加如下路径
1 | import noFound from '@/components/404' |
route文件夹下index.js中的routes中添加上
1 2 3 4 | { path:"*", component:noFound } |
重定向
方法一（常规的方式）
route文件夹下index.js中的routes中添加上
1 2 3 4 | { path:"*", redirect:"/rank" } |
方法二（对象的方式）
1 2 3 4 5 | { path:"*", //redirect:"/rank" redirect:{path:'/rank'} } |
通过对象的形式
方法三（别名的方式）
1 2 3 4 5 6 7 8 9 | { path: '/search', name: 'Search', component: Search }, { path:"*", redirect:{name:'Search'} } |
name是别名，通过别名进行跳转
方法四（函数的方式）
1 2 3 4 5 6 7 8 9 10 11 | { path:"*", redirect: (to)=> { console.log(to); console.log(to.path); if (to.path === '/123') { return '/Search'; } return '/rank'; } } |
to代表的就是输入的路由的一些信息，to.path就是这条路由的信息，例如：localhost:8080/abc，那么to.path就是/abc,我们上去语句的意思就是如果路径相同的话就返回Search，如果都没有找到，那么匹配的就是rank路由。
设置默认访问路径
默认访问到根路径
index.js
1 2 3 4 | { path: '/', component: rank, } |
app.vue（将“/rank”改成”/”）
1 | <router-link to="/" event="mouseover">ranka</router-link> |
注意
如果有点击另一个导航而当前的导航颜色依然显示的情况的时候，就要添加exact（精确匹配）
在app.vue中的下面一定要写
在html中，驼峰式命名是不能够被识别的，引用组件需要使用json格式，如下引用nav
index.js中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import NavBar from '@/components/navBar' Vue.use(Router) export default new Router({ // 更改路由模式 mode:"history", // 点击的每一个都是这个颜色 linkActiveClass:'is-active', routes: [ { path: '/', name: 'NewSong', components: { nav:NavBar, } } ] }) |
app.vue中
1 | <router-view name="nav"/> |
7