路由和線路

路由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',// 修改全局的classlinkActiveClass: '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}})

總結

以上是生活随笔為你收集整理的router的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。