路由和线路
路由router
表示当前项目全局的路由实例对象
跳转方法:push,replace,go,back
线路route
表示当前路由页面的信息对象
获取动态路由的参数:params
router跳转的两种方式
js跳转叫[编程式跳转]
<button @click="fn_target"></button>
fn_target(){
this.$router.push('/home')
}
标签跳转叫【声明式】
<router-link to="/name"></router-link>
router-link
特性 默认是会被渲染成a标签 可以用tag属性修改
属性值
- to属性跳转到哪个页面和path对应 (相当于执行一次this.$router.push(’/name’))
- replace属性,不需要写值,让页面不可回退,默认是push属性
- active-class用于修改单个class属性
- tag渲染成什么元素
router-view
router-view决定渲染组件位置
routes简单语法
【注意】:不要忘记引入组件
const routes = [
{
path: '',
// redirect重定向 ,相当于直接默认了home页面
redirect: '/home'
},
{
path: ' * ',
// 当访问组件不存在时默认返回home组件
redirect: '/home'
},
{
//路由嵌套(也需要一个视口) 地址显示为 /home/name
//【注意】子路由路径中不加 / 程序自动拼接
path: '/home',
component: Home,
children: [
//重定向
{ path: '', redirect: 'new' },
{
path: 'new',
component: New,
},
{
path: 'product',
component: Product,
}
]
},
{
//动态路由
path: '/User/:userId',
//渲染时:this.$router.push(`/info/value`)
component: User
},
// 路由懒加载(不用引入组件) 分割js文件(一个懒加载对应一个js文件),避免用户加载页面会出现短暂空白
//方式一:结合Vue异步组件和webpack的代码分析(知道即可,老项目有可能会出现)
//const Home = resolve => { require.ensure(['../components/Home.vue],()=>{
//resolve(require('../components/Home.vue')) })}
//方式二:AMD写法
//const About = resolve =>require(['../components/About.vue'],resolve)
//方式三:在ES5中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
{
path: '/home',
component: ()=>import('../components/Home')
}
]
router简单使用
const router = new VueRouter({
routes,
// 默认hash值,现在改成history模式
mode: 'history',
// 修改全局的class
linkActiveClass: 'active'
})
路由传参的两种方式
params
- 隐式(不推荐) 静态路由使用params传参,地址栏不会带参数,所以刷新页面数据会丢,一般不使用
- 显示-动态路由传参。且必须使用路由命名的name属性,不可以使用path。使用params对象传递参数
//映射id this.id=>this.$route.params.id
props:['id']
this.$router.push({
name:'home',
params:{id:1}
})
// routes配置中要有相应的name
const routes = [
{
// 动态路由等于params显示传参
name: 'home', //给当前路由起一个名字,所以叫命名路由
path: '/a/:id,
component: () => import('./A.vue'),
// props解耦,让组件的props解耦params参数(默认是false),可以简化语法
props: true
},
]
query
使用query传参,地址栏以get请求参数的形式表现。他没有动态路由优雅
// routes配置中要有相应的path
this.$router.push({
path:'/home',
query:{id:1}
})