路由配置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../components/Login.vue"
import Home from "../components/Home.vue"
import Wellcome from "../components/Wellcome.vue"
import User from "../components/User.vue"
Vue.use(VueRouter)
const routes = [
{
path: "/",
redirect: "/login"
},
{
path: "/login",
component: Login
},
{
path: "/home",
component: Home,
redirect: "/wellcome",
children: [
{ path: "/wellcome", component: Wellcome },
{ path: "/users", component: User },
{ path: "/roles", component: User },
]
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
if (to.path === "/login") return next()
const token = sessionStorage.getItem("Token")
if (!token) return next("/login")
next()
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
路由跳转
一.router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个a>标签.
router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
二 . 代码跳转
路由懒加载
const Home = () => import('../components/Home.vue')
嵌套路由
{
path: "/home",
component: Home,
redirect: "/wellcome",
children: [
// 加/和不加访问路径是有区别的,加了之后router-view放在home组件下,访问是/wellcome,不加访问是/home/users
{ path: "/wellcome", component: Wellcome },
{ path: "users", component: User },
// {path: "", redirect: "/wellcome"}
]
}
<router-link to="/welcome">
<router-link to="/home/users">
传递参数的方式
传递参数主要有两种类型: params和query
一.params的类型:
配置路由格式: /router/:id(动态路由)
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
二.query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
如何使用它们呢? 也有两种方式: router-link>的方式和JavaScript代码方式
$ route和$router的区别
1、$ router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
2、获取参数通过 $ route对象获取的,$route为当前router跳转对象里面可以获取name、path、query、params等
keep-alive
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
它们有两个非常重要的属性:
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存: