Vue-Router笔记

Vue-Router

• 路由配置
• 嵌套路由

vue属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的十足组件替换这个页面内容

√ 路由根据浏览器访问路径的不同，展示不同的视图组件

√ 通过vue-router实现路由功能，需要安装js库（npm install vue-router）

路由组成：

• VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件

• ：路由链接组件，浏览器会解析成

• ：路由视图组件，用来展示与路由路径匹配的视图组件

  

import router from ‘./router’
在vue中，./一般是在src文件夹下

路由表维护 在src->router->index.js中

// 维护路由表，某个路由路径对应哪个视图组件
const routes=[
{
path:'/',
name:'/',
component:HomeView
},
{
path:'/',
name:'/',
// 懒加载的方式 
// which is lazy-loaded when the route is visited.
componet:()=>import ('../views/AboutView.vue')
}
]

路由模板用 to 指定跳转的链接

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view/>

实现路由跳转的方法：

• 标签式
• 编程式

编程式：

<script>
export default {
methods:{
jump(){
this.$router.push("/")
}
}
}
</script>